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What's on the CD-ROM 



The companion CD-ROM includes artwork elements 
used in the sample exercises throughout the book, soft- 
ware, plug-ins, Shockwave movies, and completed GIF 
animations created by professional new-media artists. 



<0 Art files from artists and Web specialists Frank DeCrescenzo, Curtis Eberhardt, Kleber 
Santos, Peju Alawusa, Jane Greenbaum, Alex Shamson, Greg Hess, and John Scott. 
(Note: For a detailed inventory of files, see the readme i\\e on the CD-ROM.) 




Journalist Peter Chov/ka’s interview with Nobel prizewinner Linus Pauling, 
styled with Microsoft’s cascading style sheets (as defined by the World Wide 
Web Consortium). 



0 ) 



Scans of nineteenth century photographs of Coney Island Amusement Park for 
use as a texture map when creating a Coney Island VRML attraction. 

Shockwave movies and GIF animations from artists Larry Rosenthal and 
Curtis Eberhardt. 

Software applications, browsers, and plug-ins for creating and viewing 
Web artwork. 



See the readme files in each folder for acknowledgments, description.s, copyrights, instal- 
lation instructions, limitations, and other important information. 

Requirements 

Software: Macintosh OS, version 7.1 or later Hardware: 68 K Macintosh or 

Browser — Netscape Navigator, Power Macintosh 

version 3.0 or later; or Microsoft 
Internet Explorer, 
version 3.0 or later 
Photoshop, version 3.0 or later 
Virtiis WalkThrongh Pro, 
version 2,6 or later 
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Preface 




Author: 

Mary Jo Fahey 



T his is an exciting time for digital artists. Many new 
tools are available for creating digital artwork, and 
several are related to creating Web pages: HTML style 
sheets that make text formatting easier; NetObjects Fusion, 
a hot new Web page layout tool for artists who don’t like 
HTML tags; client-side image maps, a superior way to cre- 
ate image maps that frees you from image map scripts on 
the server; frames; fonns; VRML, the language that 
describes 3D space on the Web; shortcuts for creating art 
with Fractal Design Painter; GIF animation; background 
sound for Web pages; and streaming video. Even as this 
second edition of Web Publisher's Design Guide For 
Macintosh goes to press, numerous new trends and devel- 
opments are continuing to emerge. Because the new trends 
are so numerous. Chapter 1 is now called Web Watching 
And Planning. Included in that chapter is information 
about resources that enable digital artists to follow these 
changes as they occur. 

This second edition is more interactive than the first. Many 
of the artists who have contributed samples have also gener- 
ously provided art files, which can be found on the compan- 
ion CD-ROM. 

I hope you like the second edition of Web Publisher's 
Design Guide. Send me an email message and let me know 
how you like the book! 

Mary Jo Fahey 
mj fahey @ i nterport.net 
http://ww'w.echonyc.com/-art 
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Web Watching And 
Planning 



Offline Web browsing facilitated by CD-ROMs is one of many new 
trends for Web designers to watch. This chapter highlights important 
resources for Web trend watching and includes several examples of 
new trends. 

The most significant new Web development that will affect planning 
is the impending browser war between Netscape and Microsoft. 
Regardless of which company wins the browser war, Macintosh Web 
artists cannot ignore the software development that is taking place on 
the Windows platform. Because some software may never be devel- 
oped for the Macintosh platform, this chapter includes tips on how to 
run Windows 95 software on Macintosh hardware. 

Although it’s tempting to begin your Web page creations with graph- 
ics, in this chapter David Reinfurt makes us aware of key project ele- 
ments to have in place before the graphics begin. 




Web watching: 
Internet 

magazines (oniine 
and print) and 
user group SIGs 

Summary: Graphic designers who keep 
up with changes on the Web will 
he better ecpupped to create content 
for their clients. 





Above: Interactive Week, published by 
Ziff-Davis, is both a print and online 
publication ( htip://www. zdnet. com/ 
innveek). Above right: Web Week, pub- 
lished by Mecklentiedia, is both a print 
and online publication (http://www 
.webweek.com). 




Above: Internet World, published by 
Mecklermedia, is both a print and 
online publication (http://www 



.iworld.com). 



B y investigating new trends, graphic designers can 
assist their clients in planning content strategy for 
their Web site. Resources include: 

1. Online publications. 

a. Webweek and Interactive World, published by 
Mecklermedia. 

b. Interactive Week, published by Ziff-Davis. 

2. Print publications. 

Magazines that provide in-depth product reviews and iden- 
tify emerging trends on the Internet include: 

a. The Net, published by Imagine Publishing, includes a 
hybrid CD-ROM with Web tools, software demos, 
movies, animation, and other large files which are diffi- 
cult to download (http.7/www. thenet-usa.com). 

b. WebTechniques, a Miller Freeman publication, con- 
tains an excellent HTML column written by Laura 
Lemay, author of Teach Yourself Web 
Publishing and HTML in a Week, published by 
Sanis.net. 

c. PC Novice, by Peed Coiporation, contains a plain-lan- 
guage introduction to PCs. 

3. User group SIGs (special interest groups). 

User groups represent a tradition that has existed for two 
decades. Call a local computer store or university computer 
center for information about local user group meetings. 
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Web watching: 
Windows 95 
and Webtv 



Summary: Macintosh artists should be 
aware of Web- related trends on the 
Macintosh PC, and the new Webtv 
boxes. 




Above: ActiveX animation on Spike Lee's 
site available thmugh Microsoft 's 
Internet Explorer browser window. 




Above: New Webtv boxes are now 
available from Philips Magnavox and 
Sony Electronics are priced from $329 
to $349. The Webtv Internet provider 
ser\dce is $19.95 per month for unlimit- 
ed access. 




G raphic designers cannot assume that Macintosh 
Web pages are the same as PC Web pages. For 
example, Spike Lee’s Web site (http://blackamericaon- 
line.com/bus/index.html) opens with ActiveX animation 
that cannot be seen on the Macintosh platform at this 
I time. Rather than wait for Macintosh software to be 
developed, graphic designers should consider adding 
Windows 95 hardware to their studio. (Note: See 
' ''Options for running Windows 95 software on your 
Macintosh" in this chapter.) 

I Webtv is an inexpensive portable Web-viewing box, 
which makes Web viewing and email possible on a TV 
set. The small, lightweight boxes are available from 
I Philips Magnavox and Sony Electronics. (Note: Local 

I 

access phone numbers are listed on the Webtv site at 
http://www.webtv.net. )T\\^ $330-$35() unit uses a propri- 
etary browser, and Web viewing is made possible through 
Webtv Internet provider service. A 33.6 Kbps modem is built 
in, and an optional cordless keyboard is available at the elec- 
tronics retailers for $50-60. The unit also contains a PS/2 
keyboard socket, a smartcard slot, and a 96-pin I/O port 
which Webtv plans to enable for a printer (800-469-3288). 

Although the Webtv browser cannot see frames or VRML at 
this time, updates to the Web browser are expected. Graphic 
designers who create Web content for the home market 
should consult the HTML guidelines on the Webtv site 
(http://www.webtv.net). 
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Options for 
running 
Windows 95 
software on your 
Macintosh 



Summary: Running Windows 95 soft- 
ware on a Macintosh computer can get 
you acquainted with PCs and keep you 
up-to-date on important developments. 






Insignia 

SOLUTIONS . 




B y adding a board with a Pentium processor to your 
Macintosh, your computer becomes a dual proces- 
sor that can run software for both platforms. The flip 
between operating systems is controlled with keys on 
the keyboard. In addition to a processor, the card must 
contain its own memory and its own sound. A port that 
hooks to a modem is optional on some cards because the 
PC card may share the Mac modem. 

Although a second computer is an option that should be 
considered, a dual processor solution is about half the 
price of new 1 66 MHz Pentium machines. A PC card is 
also several hundred dollars cheaper than reconditioned 
Pentiums that are now being sold through outlet stores 
for major hardware manufacturers, such as Dell and 
Micron. The companies that sell Windows 95 enabling 
hardware and software for Macintosh include: 



1. Apple Computer. 

Apple’s Power Macintosh 7200/120 PC compatible com- 
puter is equipped with a pre-installed Pentium 586/100 
MHz card. Industry benchmarks compare the speed of the 
586/100 MHz card to that of a Pentium 75 MHz. The card 
may also be installed in any PCI-based Power Macintosh 
system. J & R Computer World in New York City sells this 
system for $2,295. 



2. Orange Micro. 

Orange Micro makes two varieties of Orange PC cards: one 
for NiiBus-based Macintosh computers and another for 
PCI-based machines. The cards come with one parallel port 
and tw'o serial ports for adding PC peripherals. Window's 95 
must be purchased separately for $142. 
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Tip: PC cards built for Macs have the 
following* features: They do not require 
rebooting, PC-type CD-ROM disks may 
be read from the Macintosh CD-ROM 
drive, files may be shared by both envi- 
ronments, the Macintosh SuperDrive is 
used as Drive A:, there is read/write 
capability to Macintosh or PC 
diskettes, and there is a shared 
Clipboard between Macintosh and PC 
environments for cutting and pasting. 



Card 


Speed 


8 MB 


16 MB 


32 MB 


Model 320 
(NuBus) 


133 MHz 


$738 


$852 


$1,080 


Model 340 
(PCI) 


133 MHz 


$1,040 


$1,128 


$1,356 



Orange Micro cards are available from Orange Micro al 
714-779-2772 and Mac Powerhaus al 800-615-3183. 
(Note: Look for Orange Micro *s home page at http://www. 
orangemicro. inter, net. ) 



David Lerner, who owns Tekserx^e, a 
well-known Macinto.sh repair facility in 
New York City, uses a dual-pwcessor 
solution to run Federal Express tracking 
software ( help @ teksen^e. com ). 



3. Reply Corporation. 

Reply Corporation (800-955-5295) manufactures the PC 
cards that Apple adds to the 7200/120 MHz Power Mac. The 
card is slightly less expensive than Orange Micro’s. Windows 
95 and sound are bundled, but the cards do not come with the 
ports necessary to hook up PC peripherals. A port adapter 
can be purchased separately. (Note: Look for Reply 
Corporation 's home page at http://www.reply.com.) 



Card 


Speed 


40 MB 


NuBus 


100 MHz 


$700 


PCI 


166 MHz 


$1,115 



(Note: Smaller memory configurations at lower prices are 
also available for Reply Corporation *s PC cards. A 40 MB 
memory configuration is listed to give readers an appro.xi- 
mate idea of price. A card for the 6 100, 7100, and 8100 
Power Macs is appro.ximately $800 to $900. ) 

4. Insignia Solutions. 

Insignia has created a software emulation program that is 
the least expensive alternative for nmning Windows 95 
software. Speed is entirely dependent on the Macintosh 
machine’s processor. J & R Computing in New York City 
sells Insignia’s SoftWindows software for approximately 
$400. (Note: Look for Insignia Solutions* home page at 
http://www. insignia, com. ) 
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New trend 
to watch: 
CD-ROMs that 
augment a print 
publication or a 
Web site 



Summary: CD-ROM is a convenient 
media for high-bandwidth content. 
Pid?lishers at The Net magazine 
assume that anyone who is buying an 
Internet magazine also has a CD-ROM 
drive. The magazine editors have 
copied simple HTML files to the 
CD-ROM, which can be opened in a 
reader *s Web browser. 




Internet Explorer 

Ic. 



ilWM Idit Piru* 


PC 


N.v tutnitoiu 


»N 


Opnn lotallon.ir 


Ml 


Clo«t 


MU 


cio«p nti 




>a*>r 


MS 


liiM infu 


Ml 


linpoft .. 




liipnil... 




I’dgv Setup... 




rrini. 


ar 


Quit 


MB 



Id. 




W ho said HTML files need to be “served” from a 
file server? Digital media experts at The Net 
magazine have created a clever CD-ROM disk that gets 
distributed with their magazine and allows HTML files to 
be viewed online or offline (http://www.thenet-usa.com). 

1. Steps to open The Net's CD-ROM. 

a. Connect to the Web with your PPP connection. 

b. Open The Net's CD-ROM. 






NETPOWER 

la. 




lb. 



c. If you do not have a Web browser software program, 
launch or install Microsoft’s Internet Explorer browser, 
which is included on The Net's CD-ROM. 

d. Select Open File from the File pull-down menu. 

e. In the dialog box that follows, select Start.htm, and click 
on Open. 

f. The Net magazine’s CD-ROM interface will open in the 
browser window. 




If. 
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The Net magazine’s 
director of CD-ROM 
deveiopment, 

Tom Haie, shares 
tips on creating a 
hybrid CD-ROM 

Summary: The Net magazine *s 
CD-ROM disk is a valuable supplement 
to the magazine, providing tools and 
helpful links for readers. 



start.htm 

H ybrid CD-ROMs can be played on both Macintosh 
and PC hardware. Although Tom Hale at The Net 
magazine admits that it’s challenging to create content 
that is identical for both platforms, one CD-ROM is 
more efficient than two separate disks. In this section, 
Tom has identified tips for Web developers who are 
considering a CD-ROM supplement for their Web site. 

1. HTML files work cross-platform. 

HTML files are perfect for a hybrid CD-ROM because the 
Web is a cross-platform digital medium. However, it’s still 
challenging to create content that will be useful for a variety 
of PCs and Macintosh computers. 



2. Put all large files on the CD-ROM. 

The Net magazine puts all art, movies, animation, and 
demo software on the CD-ROM and puts text on the Web 
site. This shift solves all bandwidth problems, and the 
Web site becomes a vehicle to distribute fresh content 
that’s easy to download. 



3. Web tools are a valuable addition. 

Web tools are distributed each month, so readers do not 
need to download the software themselves. Shareware and 
demo software programs are usually large, and download- 
ing is time consuming. Tools are valuable, and readers will 
want to keep the CD-ROM near their computer. 

4. Future add-ons to the CD will include chat. 

As The Net magazine’s Web site and CD-ROM evolve, live 
interactive chat between editors and readers is an interesting 
addition that’s planned. 
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New trend 
to watch; 
offline browser 
software that 
automatically 
downloads Web 
content 



Summary: Offline browsers act as 
spiders or Web agents that automatical- 
ly deliver fresh Web pages to your hard 
drive by topic. 



S everal new Internet utilities help collect, organize, 
and save Web pages or entire sites for offline view- 
ing or CD-ROM mastering. 

1. Macintosh offline browsers. 

a. Web Buddy, by Dataviz, PowerMac and 68 K versions, 
$50 (http://www.dataviz.com). 

b. Freeloader, by Freeloader, Inc., free 
(http://www.freeloader.com). 

c. Web Whacker, by Forefront, requires System 7. 1 or 
greater, $69.95. 

d. BackWeb, by BackWeb, Inc., Macintosh OS, free 
(http://www.backweb.com). 




2. PC Offline browsers. 

a. Web Buddy, by Dataviz, Windows 3.x, Windows 95, 
and Windows NT versions, $50 (http://www 
.dataviz.com). 

b. Freeloader, by Freeloader, Inc., Windows 3.x, 
Windows 95, and Windows for Workgroups versions, 
free (http://www.frceloader.com). 

c. Web Whacker, by Forefront, requires Windows 95, 
$69.95 (http://www.ffg.com). 

d. Surfbot3.0, by Surflogic LLC, Windows 95 and 
Windows NT versions (http://www.surflogic.com). 

e. W Smart Bookmarks, by First Floor, Windows 3.x, 
Windows 95, and Windows NT versions, $24.95 
(http://www.rirstfloor.com). 

f. Net Attache Light, by Tympani Software, Windows 3.x, 
Windows 95, and Windows NT versions, free for non- 
commercial, personal use (http://www.tympani.com). 

g. Milktruck, by Traveling Software, Windows 95 and 
Windows NT versions, free for noncommercial, 
personal use (http://www.travsoft.com). 

h. BackWeb, by BackWeb, Inc., Windows 3.x,Windows 
95, and Windows NT versions, free. A BackWeb 
server is available for Unix, NT, and proxy servers 
(http://www.backweb.com). 
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New trend 
to watch: 

Web site analysis 
software 



Summary: Broken links and image 
references are easier to manage with 
Web site analysis tools. 




Adobe 

s I T E in I L r 




W eb site analyzers let you see what’s working on 
any Web site and solve the problems associated 
with restructuring a Web site, moving files, updating a 
Web site, renaming pages, or deleting files that are still 
in use. 



1. Adobe SiteMill for Macintosh. 

Adobe SiteMill reads an existing Web site and automatically 
finds and summarizes the errors found. The software 
includes Web page authoring features found in Adobe’s 
HTML editor, Adobe PageMill. SiteMill can be run on any 
Macintosh running System 7 or higher with at least 3 MB of 
free memory and a color display. Price is $ 1 99.95 
(http://www.adobe.com). Features include: 

a. automatically fixes all links throughout a site when 
folders are renamed, moved, or deleted. 

b. shows warnings for unreachable or unused resources. 

c. displays all resources, page titles, and folders. 

2. inContext WebAnalyzer for Windows. 

Like Adobe’s SiteMill, InContext WebAnalyzer identifies 
broken links and problem resources. However, unlike Adobe 
SiteMill, which fixes broken links automatically, 
WebAnalyzer must be integrated with an external HTML 
editor to repair links. The software requires Windows 95 and 
at least 8 MB of RAM. Price is $129.95 (http://www.incon- 
text.com). Features include: 

a. identifies broken links and images, 
b- is compatible with popular Web browsers. 

c. can be integrated with popular HTML editors for Web 
page repair. 
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The Reuters 
Web sites 



Summary: In this chapter on planning, 
the Reuters sites provide an excellent 
Web site development model Built by a 
professional graphic designer for a 
client who understands online informa- 
tion technology, these sites represent 
petfect '*Web craftsmanship,*' 

Note: Two Twelve Associates is a multi- 
disciplituuy design firm specializing in 
enviwnmental graphics, print, and inter- 
active design. The Jinn is located at: 

596 Broadway, Suite 1212 
NewYork, NY 10012-3234 
212-925-6885. 




F ew people wander around the Web without a purpose. 

Travelers usually search and navigate with the help of 
signs, just as they do on the street. 

For several decades, signs in architectural spaces have been 
designed by a group of graphic designers known as environ- 
mental designers. Just as graphic design has evolved in the 
print medium, so have the visual aesthetics and formulas 
used in environmental graphics. For example, environmen- 
tal designers have adopted the architect’s phased approach 
to project development, which includes planning, schemat- 
ics, design, and production. 

Environmental graphic designers now know a great deal 
about effective organization of space and use of environ- 
mental elements. In fact, one graphic design firm specializ- 
ing in environmental graphics is uniquely positioned to 
offer advice on “planning a Web site.” The underlying prin- 
ciples of helping people “find their way” are as appropriate 
for virtual spaces as they are for real spaces. 

Two Twelve Associates. 

Using the principles of “wayfinding,” the graphic designers 
at Two Twelve Associates have been designing spaces for 
almost 20 years. Wayfinding is the study of peoples’ move- 
ments and their relationship to space. It’s also the process of 
reaching a destination, which involves problem solving. 

Two Twelve Associates has used wayfinding design to plan 
spaces for clients such as the South Street Seaport, the 
Central Park Zoo, the Baltimore Light Rail Subway, the 
Baltimore Waterfront Promenade, the City of New York 
Department of Parks and Recreation, and the Metropolitan 
Transportation Authority. 

Recently, David Reinfurt, a graphic designer with Two 
Twelve, designed and built the two Web sites for Reuters, 
shown in this chapter. David’s skill as an environmental 
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graphic designer and his insight into how to plan a project will 
help Web designers organize their own sites. 



1. Reuters News Machine. 

For business people suffering from “information overload ” 
Reuters News Machine offers what might be called an elec- 
tronic clipping service called my.news. For a fixed monthly 
fee, a computer user can predefine the categories of news 
they wish to receive, and Reuters will deliver all related sto- 
ries. The service also offers general news, sports news, busi- 
ness news, offbeat news (alt. news), and an area called 
news.talk, dedicated to online discussions about current 
events. 

a. News content groups. Up-to-the-minute reports from 
the Reuters bureaus around the world are organized into 
four “contend groups. Users can click on a category and 
then review a list of headline/synopsis items. Each news 
headline is a link to the full story. Content groups 
include: 

• news, which contains general news items from 
around the world. 

• business, which includes stories shaping the eco- 
nomic and business news. 

• sports, which contains the latest sports stories. 

• alt.news, which includes “offbeat'' news. 
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Tip: The Reuters Business Information 
Products site has full- bleed images, 
which have been ghosted to a light gray 
and white and used to cover the back- 
ground. This effect is achieved with the 
<Body Background = fHename.gif > 
tag at the top of the HTML document: 



<body background- 
”fi 1 ename.gi f’’></body> 



b. News functions. This consists of two unique ‘'news 
tools” and a news discussion area where you can partici- 
pate in news discussions with people around the world. 

• News.search is a powerful search tool that responds 
to a keyword search, gathering news items on any 
topic you choose. 

• My.news is the Web equivalent of an electronic clip- 
ping service allowing you to predefine news cate- 
gories of interest. The news stories are automatically 
delivered to your computer several times a day. 

• News.talk is an area containing news “threads,” 
which are followed by people all over the world. 
Users exchange their views by posting messages to a 
particular thread in response to a news item. 



2. Reuters business information products. 

Reuters Business Information site was created to support two 
new Reuter’s online business services: Reuters Business 
Briefing and Reuters Business Alert. These two online, user- 
definable news retrieval services offer news gathered from 
more than 2,000 sources and delivered up to 15 times a day 
to a subscriber’s PC or seiwer. 

Reuters Business Briefing is a sender-based product that can 
assemble news in one central location and distribute it on an 
enterprise-wide basis via Lotus Notes. 

Reuters Business Alert is a smaller, workstation or LAN- 
based news-gathering service designed for PCs running 
Microsoft Windows. 

a. Products. A mouse click on the Products button will 
take visitors to pages that describe both of the Reuters 
business information products. 




(Products) 

IntrodTici^ Reuters Busmess Briefing and Reuters Business 
Alert Server ;-- wsys to Jwlp your company gain the 
compeddvg \dge ^ 



2a. 
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Tip: Notice (hat the outline around but- 
tons has been turned off. Netscape 
ordinarily displays a heavy blue line 
around an image that *s a link ( called 
an ''active link'*) and a purple line if 
the link has been clicked (called a "vis- 
ited link**). To turn off the outline, 
enter: 

<img src-''fi lename.gi f" 
border-0> 




b. Sales Contacts. The Sales Contacts button (Figure 
2b 1 ) will branch to a map of the United States. Clicking 
on a state (Figure 2b2) will bring up a silhouette image 
of the sales rep for that state (Figure 2b3), and, if the 
browser has a built-in sound player, the rep’s “hello” 
will be heard. 




■ r - T ' — 

, ; r 

Contacts) 

Contact a Reuteiaa^s reprwantative near yo\x 
^ - - - 
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c. Sources. If visitors are interested in knowing the 
sources for news, a Sources button will branch to a sec- 
tion that will display the information onscreen. 
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The Renters g.lobal nervoik, plus more than 2,000 additional 
sotxrcw 



2c. 



14. Chapter I 






d. Feedback. The Feedback button (Figure 2d I ) branches 
to a questionnaire. A multiple-choice format with 
checkboxes makes the form (Figure 2d2) easy to use. 




.^Feut^ck). 



2dl. 




2d2. 



e. The Network. The Network button takes visitors to an 
area that changes most frequently. It includes product 
announcements and a “faq” — or frequently asked ques- 
tions — section. 




(The Network) 

Chat "srith us about the latest nevs, technical developments, 
database enhancements and other helpful items to get the most 
from Reuters Business Information products 



2e. 
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David Reinfurt’s 
tips on planning 
a Web site 

Summary: The essential early steps in 
the Web site development process do not 
involve graphics; they require the cre- 
ation of an underlying structure. 
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1. Assemble the team. 

For a graphic design firm, the Web development team 
includes client members as well as members irom the 
graphic design firm, including: 

a. A manager, client. This person has the authority to 
make decisions and is most likely a member of the firm’s 
marketing team. Ideally, this team member is very famil- 
iar with the Web and can be relied upon for content 
ideas. 

b. Writer/marketing specialist, clienl. In Reuters’ World 
Wide Web terminology, this person is known its an editor. 
Analogous in some ways to a managing editor, this mem- 
ber contributes content ideas and has an on-going role in 
the life of the Web project. Ideally, this team member is 
very familiar with the Web. 

c. A technical specialist, client. This member is responsi- 
ble for making the Web pages and the server work. The 
team might look to an Internet provider to fill this role. 
Ideally, this person is familiar with the Macintosh, PC, 
and Unix platfonns. 

d. Graphic designers, graphic design firm. Depending 
on the size of the project, two designers may be involved. 
A senior designer directs in artistic areas, and a junior 
designer is involved in production. 
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e. Information Designer, graphic design firm. This 
member has a writing background and will review the 
marketing content to see if it is appropriate for the Web. 
For example, marketing content created for print is often 
too wordy; an information designer will know how to 
edit the content for Web pages. This member should be 
very familiar with the Web. 

2. Develop a concept. 

Developing a concept usually involves a brainstorming ses- 
sion, w'hich may last an entire week. At this stage, a rough 
content list consisting of bullets should be developed. This 
information will be refined and organized in a schematic 
process, as outlined next. To help facilitate the flow of ideas 
in brainstorming sessions: 

a. Tour the Web. Analyze what’s possible, and examine 
well-implemented sites. Because the Web is large and 
changes frequently, each team member should have a 
connection and be able to search the Web independently. 

b. Consider sources for content. Although a finn’s exist- 
ing collateral materials may be repurposed for a Web 
site, ideally the site should have new content. 

c. Develop an underlying paradigm or metaphor. 

One of the most important elements to consider 
during initial brainstorming sessions is the underlying 
paradigm: 

• Is it a bookstore? 

• Is it a record store? 

• Is it a catalog? 

• Is it a public relations vehicle? 

The Reuters development team decided the News 
Machine site would be an online news source, some- 
where between newspaper and television, and the 
Business Information Products site would be a public 
relations vehicle. 
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3. Develop a schematic (on paper). 

While llic writers develop copy, the graphic designers 
develop a minimal schematic. Copy, in the form of diagram 
labels, is u.sed to identify the components of the Web site 
(Figure 3a). 



Functional Schematic 
Reuters News Machine Web Site 
4.3.95 
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Level 2 



Level 3 
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Other 
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Level I contains the site’s components as described in 
way finding design. (See Wayfinding principles in Web site 
design later in this chapter.) In this model, the components arc 
the four news content areas and three news functions. 
Although these are not shown on the minimal schematic, they 
show up as text in the schematic prototype and as glyphs, or 
identifying icons, in the graphic design phase (Figure 3b). 

Level 2 contains the destinations described in way finding 
design. In this model, destinations include types of news. 
(News, sports, business, and other fields are page names, 
which were modified and rearranged later in the project.) 
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4. Plan navigation. 

The arrows on the schematic diagrams roughly describe navi 
gation. Later, sets of glyphs arc developed to help users navi- 
gate (represented schematically in Figure 4a and 
implemented in Figure 4b). Other navigation aids include 
links to a help screen and a site map. 




4b. 
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Tip: Make sure text copy is proofread 
carefully. Fun, amateur** Webpages 
are not harmed much by typos, but pro- 
fessional bu.siness sites riddled with 
typos can have an unprofessional 
appearance. 



5. Create a schematic prototype (no graphics). 

A schematic prototype consists of text-only Web pages. 
Although text is boring to look at, it focuses a team’s attention 
on content before graphics enter the picture. For the graphic 
design firm, a schematic prototype can be used to get client 
approval before moving on to the next pha.se. The prototype 
should follow the earlier schematic and contain easy-to-rcad 
copy developed for quick consumption. 

a. Easy-to-read chunks. The content should consist of 
plain language organized into chunks of four to five 
items. For example, in the News Machine project, the 
graphic design elements on the Reuters “front page” 
evolved much later in the project. Early in the project, 
the front page was represented with text items, such as: 

• News 

• Sports 

• Business 

• Other 

b. Analy/x* the information. Carefully plan how infomia- 
tion is presented. Web visitors should: 

• Understand where they are at all times. At the pro- 
totype stage, locations were identified with text 
labels. Much later, matching graphic design elements 
were created as location identifiers on ever>' page. In 
the Business Infonnation pages, the page back- 
grounds identify a visitor’s location. 

• Understand the “destinations” huilt into a site. 
Although the decision to provide visitors with some 
facility to see all de.stinations at all times was made at 
the prototype stage, the toolbar did not take shape 
until later in the graphic design .stage. In the News 
Machine site, a toolbar on every page includes all the 
destinations available to a visitor. 

• Understand what action will take them to a desti- 
nation. At the prototype stage, text links were ii.sed as 
navigation links. Buttons and other graphic design 
elements were added later. For example, in the News 
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Machine site, a click on a small icon will give a larger 
icon at the top of the next page. This reinforces that 
the action is correct. 

c. Streamline the copy. Because it is likely that Web visi- 
tors will do more scanning and glancing than reading 
from left to right, the content should be refined to contain 
essential infoimation, conveyed in keywords. 

6. Begin the graphic design process. 

If planning is phase one, then graphic design is phase two. 
During this second phase, the development team meets reg- 
ularly to review the design direction. As in print, the design 
cycle is an interactive process. During this phase, the graph- 
ic designers carefully review the visual elements and con- 
stantly ask themselves, How can I improve this? Does this 
work? Are the visual elements easy to understand? 

The work that goes into the planning phase does not end 
when graphic design begins. During the graphic design 
phase, the designer must constantly look back at the planning 
work accomplished in phase one and ask. Does the project’s 
design match the original project plan? Is it clear? Are the 
ideas easy to understand? 
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Wayfinding 
principles in Web 
site design 



Summary: Wayfinding principles, used 
to help people 'find their wayf offer 
important guidelines for Web site devel- 
opers. These ideas will become even 
more valuable as Web sites develop into 
3D spaces. 




1. What is wayfinding? 

Introduced to environmental design in the late 70s, the 
term way finding describes spatial behavior. It includes the 
decision making, decision execution, and information 
processing involved in reaching a destination. Although the 
tenii initially referred to the process of reaching a physical 
destination, wayfinding principles may also be used for 
navigating Web sites. At the most basie level, wayfinding 
consists of cognitive mapping and spatial problem solving, 
defined next. 

a. Cognitive mapping. The process of forming a mental 
image of a physical layout. 
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b. Spatial problem solving. Behavior, usually decision 
making, needed to make a journey or reach a 
destination. 

2. Wayfinding decisions. 

Wayfinding decisions are hierarchically structured in a deci- 
sion plan, which consists of one or more way finding deci- 
sions broken down into smaller decisions. For example: 

a. Decision to use Reuters news.search. If the 
news.search page in the Reuters News Machine site is a 
destination, smaller wayfinding decisions required 
would include: 

• Get on the Web. 

• Use a bookmark or open the URL associated with 
the Reuters News Machine site. 

• Select news.search from the Reuters home page. 

You would then see the screen shown in Figure 2a. 

If news.search were not an option available on the 
Reuters home page, the list of decisions would include 
whatever actions would be necessary to get to the desti- 
nation or the news.search page. 

b. Decision to contact a Reuters Sales Representative. 

If the Sales Contacts page in the Reuters Business 
Infonnation Products site is the destination, the smaller 
wayfinding decisions would be: 

• Get on the Web. 

• Use a bookmark or open the URL associated with 
the Reuters Business Information Products site. 

• Select Sales Contacts from the Reuters home page. 

• Scroll to the map of the United States. 

• Click on a state. 

• Record the name and phone number of the Reuters 
salesperson, as shown in Figure 2b. 



3. Wayfinding conditions. 

Wayfinding conditions result in a Web visitor’s arrival at 
your site. Different visitors will have different reasons for 
viewing your site. 
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a. The Web visitor is exploring. The visitor has no partic- 
ular goal or destination in mind. 

b. The Web visitor has an objective. The Web visitor is 
seeking specific information. 

4. The wayfinding design process. 

Although wayfinding principles are applied throughout the 
entire planning and graphic design process, it is interesting 
to examine the details of the wayfinding design process. 

a. Identification of components. In the News Machine 
project, identifying components was an essential part of 
die design process because it meant naming the four con- 
tent areas and three functions. Identifying the types of 
news (news, business, .sports, and alt.news) took place in 
the planning phase and again in the design phase. Notice 
the change in the names from the schematic to the graphic 
design phase. 

b. Grouping of components into destinations. In the 
News Machine site, Web visitors move from a front 
page to a destination page with news headlines and a 
news synopsis under each headline. Although it may 
contain further links, a page that contains news is con- 
sidered a destination. 

c. Linking of components. A toolbar with elements small 
enough to fit on every page means a Web visitor can 
branch to every section from every page. 



5. Wayfinding design. 

Wayfmding design involves themes that can be adapted and 
applied to Web site development. 

a. Decision diagram. A decision diagram is a list of deci- 
sions a visitor has to make to navigate a site. Although 
this step was not used in the two Reuters projects, there 
was a conscious effort to review the number of steps a 
visitor needs to take to get to a destination. As in space 
planning for physical sites, visitors should take as few 
steps as possible to get to Web destinations. 
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b. Graphics as landmarks. Web site pages should have 
related graphics that act as a masthead, but multiple 
mastheads should not be identical. In the Reuters 
Business Information site, the masthead graphic varies 
slightly from page to page. The backgrounds also act as 
visual landmarks. 
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c. Redundancy. In the Reuters News Machine site, the 
glyphs, or identifying icons, are repeated to remind 
Web visitors where they are at all times. Although the 
size varies, this reoccurring graphic assures that a Web 
visitor is not lost. In the Reuters Business Information 
Product example, notice how David repeated the identi- 
fying button image in the background graphic. 

d. Color. Although color was not used as a landmark in 
either Reuters site, it can be used as an effective identi- 
fier to help a Web visitor navigate. 
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e. Iteration. Web designers should anticipate from 5 to 20 
cycles of change in the development of a Web site. 
Focus groups, alpha testers, beta testers, and a ques- 
tionnaire on the Web site are all vehicles for gathering 
feedback from the people who travel the site. 
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6. Conclusion. 

Although a planning phase can be rigorous, it represents a 
time-tested model that adds a solid foundation to a project. 
Experience has shown that the project model that includes 
thorough planning withstands change much more than a 
project with little planning. 
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Artist featured in this 
chapter 



Merry Esparza is an Ulus- 
trator and painter who 
specializes in 3D compnh 
er illustration and inter- 
active computer graphics. 

merry@interport.net 



hrtp:/A\ww.users 
. inteqyort.net/'^meny/ 
mobiu.s.html 




Internet cafe owner 



John L Scott is 
Webmaster and co-owner 
of alt. coffee, an Internet 
cafe in New York City \s 
East Village. 

jetsam @jlotsam. com 

hitp:/An\’w altdot coffee 
.com 



Navigation 



In this chapter on navigation. Merry Esparza introduces us to both 
2D and 3D navigation on the Web. Although 3D “worlds” are rela- 
tively new, the technology does exist, and it’s changing the way 
Web visitors move around. For example, text links and inline links 
on a Web page are replaced by new navigation controls in 3D 
space. The new 3D browsers include network anchors, rubber 
bands, and node pointers that help Web travelers move by hyper- 
linking through 3D worlds. 

John Scott, an Internet cafe owner, demonstrates how frames can 
be used to navigate a Web site. Follow step-by-step instructions on 
how to assemble a frame document using art from the cafe’s Web 
site. {Note: Lx)ok for John Scott's images in an alt. coffee folder on 
the CD-ROM in the hack of this book.) 



The Mobius 
Gallery 



Summary: A?i art gallery in cyberspace 
provides a model for learning how to 
plan and develop navigation controls 
for your Web site. 
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1. The Mobius Gallery site. 

Designed by computer artist Merry Esparza 
(merry@interport.net), the Mobius Gallery site 
(http://www.users.interport.net/'-merry/mobius.html) provides 
a showcase for Merry’s artwork and Guillermo Esparza’s 
paintings and sculpture. A Web site is a unique and advanta- 
geous space for artists to set up their own exhibit — it’s inter- 
national, art does not need to be physically transported, and 
the site can be easily updated. 

a. Sculpture. To display Guillermo’s work, Merry pho- 
tographed his paintings and sculpture and scanned the 
images into Photoshop. La Magdalena, shown on this 
page, is a cast stone high-relief figure, created by 
Guillermo in 1 994. The original is in The National 
Museum of Catholic Art and History in New York City. 

b. Painting. Although images of Guillermo Esparza’s 
paintings can be seen on the Web, electronic duplicates 
can never totally render his original work, which can be 
found inside many New York City churches. His projects 
have included wall murals, domes, sanctuary paintings, 
and sanctuary statues. Geographically spread out, they can 
be easily brought together in one place — a Web site. 
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Above: Merry Esparza \s splash screen for the 
Mobius Gallery site. 




Above: Meny created a 3D cube for her logo. 




Above: Three-dimensional mural created for 
Empyrean, an interactive computer strategy 
game. 



C- Graphics is the section of the Web site containing 
Meiry’s computer illustration. One of her specialties is 
optical illusion art, reflected in the site’s splash screen. 
Merr>' explains that the Mobius Gallery’s opening screen 
is designed to “reflect the relationship between the view- 
er and the work of art.” In the image, Merry superimpos- 
es inverted perspective on linear perspective. Linear 
perspective establishes depth by using actual or suggest- 
ed lines that intersect in the background. This creates a 
space where objects diminish in size relative to distance 
from the viewer’s eye. Combined are elements of invert- 
ed perspective, a concept used in Byzantine art. In invert- 
ed perspective, objects that are farthest away appear 
larger than elements in the foreground. 

Merry’s work in three-dimensional art has also led 
to a series of murals she created for Empyrean, her 
computer strategy game. Merry built a prototype game 
in Macromedia Director and is currently talking with 
game developers about building an interactive game for 
the Web. As Merry explains, “by 1996, cable modems 
will provide enough bandwidth for game developers to 
by-pass CD-ROMs and develop exclusively for the Web.” 

2. Future 3D graphics on the Mobius site. 

Merry’s work in 3D graphics overlaps new developments in 
Web technology. As a result, she sees the Mobius Gallery as 
a test site for interesting new software programs. Examples 
include: 

a. VRML and 3DMF. Merry plans to develop a 3D version 
of the Mobius Galler>^ which Web visitors could navigate 
with 3D brow.sers such as the Duet Development 
Corporation’s Walkabout 3D World Browser (Figure 2a). 
Tliree-dimensional spaces also have the potential for 
typed conversation between visitors or between 
Guillemio, Merry and visitors. In June 1996, Black Sun 
Interactive (http://www.blacksun.com) announced 
CyberHub, a ser\'er software program that adds 
multiuser capabilities to any Web site. The software is 
highly scalable and can support virtual communities 
ranging from 10 to thousiuids of simultaneous users. 
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2a. 

Above: Duet Development 
Corporation 's 3D World browser and 
Model is a QuickDraw 3D software 
application that allows you to navi- 
gate and walk about in 3D worlds. 
Below: Realtime voice communica- 
tion is available over the Internet 
from Electric Magic (http://www 
.emagic.com). A mouse click on a 
virtual phone link inside a 3D space 
could place a realtime (voice) phone 
call over the Internet from anywhere 
in the world. 
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For more direct chat with sound, realtime voice commu- 
nication over the Internet is available from Electric 
magic (http://www.emagic.com). With a mouse click 
on a “virtual'’ phone link inside the Mobius Galler>', a 
realtime phone call could be placed to either Guillermo 
or Merry Esparza from anywhere in the world. Although 
still relatively crude compared to telephone technology, 
parties can converse by alternately talking over the 
computer’s microphone. (Note: On the IBM PC, a 
product called Internet Phone from Vocaltec works in 
a similar way. ) 

3D “walkthrough” environments can be built with 
Strata’s new Strata Studio Pro and Virtus Corporation’s 
Virtus Walkthrough Pro. The developments that make 
walkthrough worlds on the Web possible are Iw'o new 
cross-platform 3D file formats with built-in features 
designed for Web travel. VRML (Virtual Reality 
Modeling Language), sponsored by Silicon Graphics, 
and 3DMF (3D Meta File), from Apple Computer, will 
soon become as familiar to Web artists as GIF and JPEG. 

Software application programs that are VRML- and 
3DMF-savvy will have a selection on the File menu for 
saving a 3D image as a VRML or 3DMF file. Applica- 
tions will also have built-in features that enable artists to 
specify the location of a network anchor ox hotspot. 
Netw'ork anchors are clickable spots in a 3D wwld that 
hold URL information. When clicked, the Web visitor 
hyperlinks or travels to a related Web site. 

b. Apple’s QuickTime VR. For Web visitors to see gallery 
rooms from a 360-degree perspective. Merry is planning 
QuickTime VR (virtual reality) movies for the Mobius 
site. 3D panels can be rendered for a 360-degree 
panoramic image and stitched together using Apple’s 
QuickTime VR Authoring Tools Suite. Using Apple’s 
QuickTime VR Player, visitors can twist, turn, twirl, 
zoom, and pick up 3D objects in a 3D environment. In 
the future, the QuickTime VR experience will include 
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Tip: Image maps, with clickable 
regions in an inline image, may also be 
thought of as a Web navigation device. 


music and hyperlinks to other Web sites; 

Apple has only just begun to develop the QuickTime 
VR format. 


Client-side image maps, covered in the 
Client-Side Image Maps chapter, are 
easier to build than sender-dependent 
image maps. 


c. Animated 3D graphics for the Director Internet 
Player. Merry sees potential for animated tours with 
music, sound effects, and interactivity using shockwave, 
Macromedia’s Director Internet Player technology. 


32. , Chapter 2 





Principles of 
Web site 
navigation 



Summary: For the past few decades, 
print, radio, and television have been 
considered the three mass market media. 
Recently, the Web has been described as 
the fourth mass market medium. This 
vety different new medium allows view^ 
ers to interact and ** navigate.'* 




G raphic designers who have started to design Web pages 
have the privilege of shaping the newest media — the 
media predicted to inHuence the way we work, play, think, 
and learn. Because of its rapid growth, the Web will evolve 
in ways we cannot anticipate. Although many changes are 
expected to occur in the next few years, several underlying 
principles are likely to remain. 

1. Hypermedia. 

The Web is a hypermedia system developed in 1989 by 
Tim Berners-Lee, a software engineer at the Center for 
European Particle Physics. Hypermedia is interactive infor- 
mation that has no beginning and no end. Although home 
pages are starting points, Web pages should be thought of as 
non-linear. Links found on each page jump to other Web 
pages, providing a random sequencing of information. 
Viewers can navigate through an infonnation base in a vari- 
ety of ways, depending on the links they follow — and the 
information base can be spread out all over the world. 
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Hypermedia iwS a tenn invented in the 1970s, but the concept 
dates back to 1 945. Read on for a bit of history. 

a. V'annevar Bush and the Memex system. In 1 945, 30 
years before anyone thought of a personal computer, 
computer scientist Vannevar Bush described a 
Memex — a system that provided associative indexing, 
or the ability to siring together information meaning- 
ful to an individual user. Bush envisioned a system 
with text and graphics that could be viewed either 
sequentially or by following a user’s trail of associative 
thinking. 

b. Ted Nelson and the word hypermedia. In the 1970s, 
Ted Nelson, author of Dream Machines, introduced the 
term hypermedia. He saw hypermedia as a two-way 
medium in which computer users are creators as much 
as they are consumers. Apple Computer has promoted 
this idea since their 1987 introduction of HyperCard, a 
user-friendly hypermedia “authoring” toolkit. 

c. Two-w ay communication is attracting big business. 
Although CD-ROMs and kiosks have hypermedia char- 
acteristics, most are read-only. The potential for two- 
way communication is much stronger on the World 
Wide Web. As a result, commercial interests are 
focused on the Web’s marketing potential. From a mar- 
keting point of view, tomorrow’s virtual worlds can 
attract the curious Web explorers, and dynamic data- 
base engines can measure and track a visitor’s every 
response. 

2. Active explorer vs. passive observer. 

An underlying theme in every form of hypermedia is the 
viewer as an active explorer. As a traveling participant in the 
media, the viewer is given the option of deciding w'here to go 
and how to get there. Viewers move around to navigate and 
interact with an infomiation base. 

a. Two-dimensional HTML. The two-dimensional Web 
page formed from HTML tags is becoming less of a 
page and more of a background for multimedia player 
windows and new animation technologies built into the 



browser’s page. Examples include the Director Internet 
Player, the new 3D browsers, and Hot Java, an interac- 
tive 3D animation technology that can enhance a brows- 
er page with multimedia presentations or launch small 
applets in the form of interactive floating windows. All 
of these new developments have been built with viewer 
participation in mind. 

b. Three-dimensional VRML and 3DMF. In VRML and 
3DMF worlds, there are no passive observers. 

Navigation in 3D implies moving through a space or 
handling objects. Software engineers involved in the 
development of 3D worlds have invented built-in 
anchors, or hotspots. This means a click on an object in a 
3D world will hyperlink a Web visitor to another world. 

3. The home page. 

Regardless of how a Web site is organized or how many 
pages a site has, the starting point is referred to as the 
home page. Although Web visitors can travel directly to 
any page on a Web site, it’s the home page address that 
usually gets published or promoted. 

4. Navigating with URLs. 

URLs, or Uniform Resource Locators, are addresses 
used to locate information on the Web. URLs can be used 
to locate Web documents, FTP files. Gopher files, news 
files, or other Web resources as they’re developed. 
Navigation on the Web means opening a link that con- 
tains a URL. This can be accomplished by using a 
browser’s Open command and typing in the URL or by 
clicking on a link that contains a URL. A URL stores 
inlbnuation in three ways. 

a. Protocol information is the first part of the URL. For 
example, Stanford University’s Sumex-aim Macintosh 
software archive has two public mirror sites at Apple 
Computer. Accessing one requires the FTP protocol 
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Tip: Browser sofuvare programs can 
download a file from an FTP site with a 
click on an FTP link on a Web page. 
However browser software cannot 
** upload.” Fetch, by Jim Matthews, is a 
popular Macintosh shareware FTP 
utility that can upload and download 
files over the Internet. (Note: Fetch can 
be found on the CD-ROM in the back of 
this book.) 



typed into the Open Command’s dialog box, and the 
other requires an http protocol, as follows: 

ftp://mirror.apple.com/mirrors/Info-Mac.Archive/ 

http://mirror.apple.com 

In Italy, the Sumex-aim Macinto.sh software archive is 
miiTored on a Gopher site, as follows: 

gopher://gopher.cnuce.cnr.it/ 1 1 /pub/info-mac 

The protocol provides a clue concerning what type of 
information request is sent from the client (browser soft- 



ware) to a server (any computer on the Internet). HTTP 
(Hypertext Transfer Protocol) is the most common proto- 
col found on the Web because it is used to request Web 
documents from HTTP sei*vers. FTP (File Transfer 
Protocol) is used to access files on an FTP server, and a 
Gopher protocol is used to access a Gopher server. 

b. Domain name information is the part of the URL that 
follows the protocol. For example, the Yahoo! search 
engine created by David Filo and Jerr>^ Yang can be 
found at hitp://www.yahoo.com,where www.yahoo 
.com is the domain name. 

Early Internet addressing assigned addresses to 
machines, or hosts. Later, Domain Name Sendee (DNS) 
addressing was implemented, and addresses 
now refer to domains and not physical machines. 

A domain is considered to be an entity that can be a per- 
son or an organization. 

Although it’s implied that the domain name reflects the 
name of the organization managing the physical Web 
server, or host, many Internet providers allow their 
clients to use their own domain names on server space 
they lease. On behalf of a client, a provider can apply 
to InterNIC, an organiztUion that registers and maintains a 
database of domain names used on the Internet 
(hup://www.intemic.nel/ds). InterNIC is the result of a 
cooperative agreement with the National Science 
Foundation, AT&T, and Network Solutions, Inc. The 
registration process takes about a week, and the 
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application procedure is handled through email 
(http://www.intemic.net/ds). Once InterNIC approves a 
domain name, the provider receives a notification via 
email. 

c- Directory and file name information follows the 
domain name and provides additional information about 
the location of a file or directory. If a file name is present 
in an URL, it has a three or four letter extension and will 
occur in the position furthest to the right. The names to 
the left of the file name, separated by slashes, iu*e direc- 
tory names. For example, the Arizona Macintosh Users 
Group in Phoenix Arizona mns a Sumex-aim Macintosh 
mirror archive at: 

ftp://ftp.amug.org/pub/mirrors/info-mac 

Info-mac is the name of a directory. The User’s Group 
has an index document to the mirror site available at: 

http://www.amug.org/index.html 
lndex.html is the name of a document. 

5. 2D navigational structures. 

a. Linear slide shows. The simplest Web sites are 
developed as linear slide shows in which one page is 




equivalent to the next, without a top-down structure. For 
example, small sites with one or two dozen pages can be 
arranged with simple navigation buttons to move ahead 
or back. 
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b. Hierarchical tree. Large sites should be organized into 
branches, or grouped areas. Visitors can choose to follow 
a branch that interests them, which may bring them to a 
fork and then to a related group of pages. However, 
hypemiedia experts have known for some time that when 
allowed to cross from one branch to another without first 
going back “up the tree,” viewers get lost. In Figure 5b, 
notice there are no interconnecting lines between 
branches. In order to navigate from one major branch to 
another, a visitor must follow a branch back to the start- 
ing point. 




6. 2D navigation controls. 

a. Text links. Text links are the most common form of 
links on a browser page. The color of the text link indi- 
cates the type of link. 

• Link text is blue by default in the Netscape browser, 
indicating that a different Web page can be accessed 
with a click on the highlighted text. Link text is not 
necessarily underlined because viewers may turn 
underlining on or off in the Preferences dialog box. 
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Merry Esparza 's button link with a 
border. 



00 
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The same graphic with the border 
turned off. 
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The color of text links can be changed by Web page 
designers by using a hexadecimal RGB value added 
to the <BODY> tag. (Note: See Convert a Pantone 
RGB value to a Web page color code with the BBS 
Color Editor in the Online Tools chapter.) 

• Visited link text is purple by default in the Netscape 
browser, indicating that the link has been followed. 

• Active link text is red by default in the Netscape 
browser, indicating that the link is open. 

b. Inline graphics as links (buttons or arrows). Inline 
graphics are graphics that are loaded on the browser page 
along with text. When inline images are defined as links, 
the Netscape browser outlines the graphic with a border 
coded with the same colors as text links (Figure 6b 1 ). By 
default, a blue border indicates the link has not been fol- 
lowed, purple indicates the link has been followed, and 
red indicates the link is open. This border can be turned 
off with a BORDER=() attribute added to the image 
<IMG> tag (Figure 6b2). For example: 

<IMG SRC-”buttonl.gif BORDER-0> 

7. Creating 2D navigation controls with HTML. 

HTML text links and inline graphic links are both created 
with the HTML link tag <A>...</A>. Inside the link tag, 
you’ll need: 

a. The name of a file or URL to link, which will be speci- 
fied with the HREF attribute inside the link. 

For example: 

<A HREF-” toe. html”> 

b. The text or graphic that will act as the hotspot. 

Examples: 

<A HREF-”toc.htfnl ”>Scul pture 
<A HREF-'*toc.htmr*><IHG SRC-”optica.gi f''> 

c. An ending link tag. 

Following are some examples of completed links: 

<A HREF-'* toc.html ">Scul pture</A> 

<A HREF-’* toe. htmT'X IMG SRC-”opti ea . gi f ”></A> 
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8. 3D navigation controls. 

a. \RMVs network anchors are encountered in a VRML 
3D browser window when the viewer’s mouse passes 
over a link which, when clicked, will hyperlink the view- 
er to another Web site. 

b. Walkabout rubber hands were invented by the Duet 
Development Corporation when they built the 
Walkabout 3D World Browser. The rubber bands pro- 
vide a means to move forward and control navigation 
speed. Stretching the rubber band a small amount pro- 
vides slow navigation; stretching it a large amount pro- 
vides greater speed. 

C- QuickTime VR’s node pointers are encountered in a 
QuickTime VR movie player window when the viewer’s 
mouse passes over a link which, when clieked, will move 
the viewer to another movie node. 

9. Creating 3D navigation controls with 
VRML and 3DMF. 

Because VRML and 3DMF are both file formats, 3D soft- 
ware applications that support VRML and 3DMF export or 
save 3D rendered images as VRML or 3DMF files. 

An extra feature that will be important for creating 3D worlds 
is the ability to add network anchors in a VRML or 3DMF file. 
These are in the fomi of URLs, which, when clicked, will 
hyperlink a Web visitor to another part of the Web. 
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Information 
design and 
Web site 
"map making” 

Summary: Prelimitiaty structural 
sketches are an important part of the 
hypermedia development process. 
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Above: 3D murals created for 
Empyrean. Meny Espana \s interactive 
computer strategy game. 
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1. Flowcharting. 

Flowcharts, or program maps, are essential to the hyperme- 
dia design process. Merry used a sketchbook to create ideas 
for her interactive computer game. Sketches can lead to new 
ideas, which the information designer or illustrator can refer 
to in the schematic. 



2. Interactive storyboarding. 



For large projects with production teams, storyboards pro- 
vide a convenient means to communicate development ideas 
to an entire team. Some companies find it helpful to create 
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Create a table 
with HTML to hold 
navigation buttons 
and text links 



Summary: Tables created with HTML 
tags can form an invisible grid that can 
hold text or graphics. 
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T able lags are an important part of Netscape’s extensions 
to HTML. Table cells can be used to forni columns of 
text, which are otherwise impossible to create with HTML. 
For the Mobius Gallery home page. Merry discovered that a 
table offers a convenient way to line up button graphics and 
text links — each is in a separate table cell with the borders 
turned off. 

1. Use Photoshop to crop button graphics. 

Because the button graphics will occupy table cells, crop 
them into identical-sized rectangles, using Photoshop’s Info 
palette. 

a. Open Photoshop, and select Open from the File pull- 
down menu. 
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b. Select a graphic in the dialog box that appears, and 
click on Open. 

c. Select Show Info from the WindowIPalettes pull-down 
menu. 
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d. The Info Palette will appear as a floating palette in the 
Photoshop work area. Click on the Info Palette’s pop-up 
menu to select Palette Options. 

e. Click on the Mouse Coordinates Ruler Units pop-up 
menu to select Pixels. Click on OK. 
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f- Select the rectangle marquee in the Photoshop Toolbox. 

g. Drag a selection rectangle around your graphic. 

h. Note the Width and Height measurements in the Info 
Palette — you’ll need these measurements to crop your 
other button graphics. 
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i. When you’re satisfied with the selection rectangle, 
select Crop from the Edit pull-down menu. 

j. You will need to repeat these steps for all of your button 
graphics. 
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2. Save the graphic. 

a. Select Save As from the File pull-down menu. 

b- Type in a file name and add GIF as an extension. 

c. Press on the Format pop-up box, and select CompuServe 
GIF. Click on Save. 
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SimpleText 



3. Open SimpleText. 

Use SimpleText or a word processor. If you use a word 
processor, be sure to save the document as Text Only. 

4. Create a new HTML document. 

Start a new document with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Mobius Gal 1 ery</TITLE> 

</HEAD> 



5. Add a BODY BACKGROUND tag. 

Merry used a small tile with a paper texture for the Mobius 
Gallery background. When you list a GIF or JPEG image in 
the BODY tag with a BACKGROUND attribute, Netscape 
and Internet Explorer will automatically tile it to fill the 
background. 

<HTML> 

<HEAD> 

<TITLE>Mobius Gall ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"paper. jpeg"> 

</B0DY> 

</HTML> 
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6. Add an image tag. 

The IMG lag contains a source, or SRC parameter, which 
contains the name of an image file. In this example, the 
image is the splash screen that Merry designed for the 
Mobius Gallery (Figure 6). 

<HTML> 

<HEAD> 

<TITLE>Mobius Gall ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"paper . j peg”> 

<IMG SRC-''Gallery3. jpeg”> 

</B0DY> 

</HTML> 



7. Add a table tag. 

The <TABLE>. . .</TABLE> tag is the principle tag used to 
begin and end a table. 



<HTHL> 

<HEAD> 

<TITLE>Mobius Gal 1 ery</TITLE> 
</HEAD> 

<B0DY BACKGROUND-"paper.jpeg”> 
<IMG SRC-"Gal lery3.jpeg"> 
<TABLE> 

</TABLE> 

</B0DY> 

</HTHL> 



8. Add a table row tag. 

Use a table row tag <TR> each time you define a new row. 
(Note: Merry used this tag twice in her HTML document 
because her table has two romv.) 

<HTML> 

<HEAD> 

<TITLE>Mob1us Gal 1 ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"paper.jpeg"> 

<IMG SRC-’*Gallery3.jpeg”> 

<TABLE> 

<TR> 

</TABLE> 

</B0DY> 

</HTML> 
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Tip: An HTML specification is currently 
under development that will add typo- 
graphic controls to HTML with style 
sheets. For more information, stay tuned 
to http://wmv. w3.org/hypertext/WWW 
/Arena/style, html. 



9. Add table header tags. 

The table header tag <TH>. . .</TH> is used to define text 
or graphics that will appear in data cells. In this sample, 

Men y used the table header tag to define a row of images 
followed by a row of text. (Note: The table header tag 
<TH>...</TH> is very similar to the table data tag 
<TD>...</TD>. Although both function the .same, the table 
header tag has a default BOLD FONT and a default 
ALIGN-CENTER, which was useful in this .sample.) 

<HTML> 

<HEAD> 

<TITLE>Mobius Gal 1 ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-”paper.jpeg”> 

<IMG SRC-’*Ganery3.jpeg”> 

<TABLE> 

<TR> 

<THXA HREF-”toc.htmr'XIMG SRC-”opti cal . g1 f'X/AX/TH> 
<TH XA HREF-”toc2.htmr’> 

<IMG SRC-”opt1ca2.g1f”X/AX/TH> 

<THXA HREF-”toc3.htmr’lXIMG 
SRC-"optica3.g1 f**> 

</AX/TH> 

</TR> 

<TR> 

<THXA HREF-"toc.htmr>Scu1pture</AX/TH> 

<THXA HREF-’*toc2.html">Pa1ntings</AX/TH> 

<THXA HREF-"toc3.html”>Graphics</AX/TH> 

</TABLE> 

</B0DY> 

</HTML> 
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10. Use the WIDTH attribute to widen cells. 

The default width of each of the table cells caused the entire 
table to look loo nan ow (Figure 1 Oa). By experimenting with 
the WIDTH attribute in the table header tag. Merry was able to 
widen the table across the page (Figure 1 Ob). 

<HTML> 

<HEAD> 

<TITLE>Mobius Gal 1 ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"paper. jpeg"> 

<IMG SRC-‘'Gallery3.jpeg”> 

<TABLE> 

<TR> 

<TH WIDTH-160XA HREF-"toc . html’'> 

<IHG SRC-"optical.gif'X/A></TH> 

<TH WIDTH-160XA HREF-”toc2 . html '*> 

< IMG SRC-”opti ca2 . gi f ’'X/AX/TH> 

<TH WIDTH-160XA HREF-"toc3 . html "> 

<1MG SRC-‘'optica3.gir’X/AX/TH> 

</TR> 

<TR> 

<TH WIDTH-160XA HREF-"toc . html •’>Scul pture</AX/TH> 

<TH WIDTH-160XA HREF“”toc2.html '’>Pa1ntings</AX/TH> 
<TH WIDTH-160XA HREF“”toc3 . htmr’>Graphi cs</AX/TH> 
</TR> 

</TABLE> 

</B0DY> 

</HTML> 
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11. Use the BORDER attribute to turn borders off. 

By default, the table header tag and the image tag add bor- 
ders that Merry needed to turn off (Figure 1 la). Use the 
BORDER attribute in both tags to make the borders disap- 
pear (Figure 1 1 b). 

<HTML> 

<HEAD> 

<TITLE>Mobius Gal 1 ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-*'paper. jpeg"> 

<IMG SRC-'*Gal 1 ery3. jpeg”> 

<TABLE B0RDER-0> 

<TR> 

<TH WIDTH-150XA HREF-"toc . htmr'> 

<IM6 SRC-”opti cal. gif' B0RDER-0></AX/TH> 

<TH WIDTH-150XA HREF-"toc2 . htmr'> 

<IMG SRC-”optica2.gif" B0RDER-0X/AX/TH> 

<TH WI0TH-150XA HREF-“toc3 . htmr> 

<IMG SRC-"optica3.gif" BORDER-OX/AX/TH> 

</TR> 

<TR> 

<TH WIDTH-150XA HREF-”toc . html •*>Sculpture</AX/TH> 

<TH WIDTH-150XA HREF-*'toc2 . html ”>Painti ngs</AX/TH> 

<TH WIDTH-150XA HREF-”toc3 . html ">Graphi cs</AX/TH> 
</TR> 

</TABLE> 

</B0DY> 

</HTML> 
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12. Add line breaks. 

The line break tag <BR> adds space below the table. 

<HTML> 

<HEAD> 

<TITLE>Mobius Gal 1 ery</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"paper.jpeg*’> 

<IMG SRC-'‘Gallery3.jpeg"> 

<TABLE BORDER-0> 

<TR> 

<TH WIDTH-150XA HREF-”toc.htmr> 

<IMG SRC-*’opt1cal.gif" B0RDER-0></AX/TH> 

<TH WIDTH-150XA HREF-”toc2 . html”> 

<IMG SRC-”opt1 ca2.gif BORDER-OX/AX/TH> 

<TH WIDTH-150XA HREF-'*toc3.htmr> 

<IMG SRC-”opt 1ca3.gif” B0RDER-0X/AX/TH> 

</TR> 

<TR> 

<TH WIDTH-150XA HREF-”toc. htmr>Scul pture</AX/TH> 
<TH WIDTH-150XA HREF-”toc2 . html">Pa1 nti ngs</AX/TH> 
<TH WIDTH-150XA HREF-”toc3 . html"> 

Graphics</AX/TH> 

</TR> 

</TABLE> 

<BR> 

<BR> 

</B0DY> 

</HTML> 
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Tip: Providing a signature area aids in 
interactive design by encouraging view- 
ers to send comments, questions, or sug- 
gestions about your Web site. 



13. Add the signature area. 

Il’s customar>' lo add a signature area at the bottom of each 
Web page. This iirea contains contact information separated 
from the rest of the page with a horizontal rule <HR>. 

<HTML> 

<HEAD> 

<TITLE>Mobius Gal lery</TITLE> 

</HEA0> 

<B0DY BACKGROUND-"paper.jpeg”> 

<IMG SRC-"Ganery3. jpeg”> 

<TABLE B0RDER-0> 

<TR> 

<TH WIDTH-150XA HREF-*’toc . html "> 

<IMG SRC-”optical.gif” B0RDER-O></AX/TH> 

<TH WIDTH-150XA HREF-”toc2 . htmT*> 

<IMG SRC-”optica2.gif” B0RDER-0X/AX/TH> 

<TH WIDTH-150XA HREF-**toc3. htmr’> 

<IMG SRC-”opt1ca3.gir' BORDER-OX/AX/TH> 

</TR> 

<TR> 

<TH WIDTH-150XA HREF-'*toc . html *’>Scul pture</AX/TH> 
<TH WIDTH-150XA HREF-”toc2 . htmr'>Paint1 ngs</AX/TH> 
<TH WIDTH»150XA HREF-"toc3. html">Graphics</AX/TH> 
</TR> 

</TABLE> 

<BR> 

<BR> 

<HR> 

<ADDRESS> 

Merry Esparza can be contacted at:<BR> 

Merry Esparza Des1gn<BR> 

</ADDRESS> 

<A HREF-”ma1 1 to : webmaster©ref . com**> 
webmaster@ref . com</A> 

</B0DY> 

</HTML> 



Navigation I 51. 



14. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML3.2 specification. 

<A>...</A> 

Refeired to as an anchor, this tag uses the HREF attribute to 
link to an external file. For example: 

<A HREF-'*toc . html ''>Scul pture</A> 

( Note: The HTML file name must include the path name if 
^ the file is located in another directory. ) 

<ADDRESS>.,.</ADDRESS> 

The address tag provides a means of signing your Web 
page. The information inside is specially formatted 
and provides Web visitors with information about who 
created the page and who they can contact. This tag 
occurs at the bottom of a Web page, in a section known 
as the signature. 

(Note: It is cu.stomary to add an email address to the 
.signature and to use a MAILTO URL. By building a link 
with an email address and by adding the MAILTO URL 
to the HREF attribute, viewers get an empty email form 
with the address already filed out whenever they click on 
the link.) 

<BODY>...</BODY> 

A tag used to open and close the body of a document. 

<BR> 

A tag used to break a line. This tag does not require an 
ending tag. 

<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 

<HR> 

A lag used to create a horizontal rule. This lag does not 
require an ending tag. 



I 
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Tip: Derrick Smith, a Visucil Basic pro- 
grammer from Provo, Utah, collabo- 
rated with artist Frank Decrescenzo and 
built a popup navigation menu for the 
Slappers Web site using Microsoft *s 
ActiveX. Look for details about 
Slappers, a new, flat drumstick in the 
Forms chapter. 



<IMG> 

Used to refer to an image, this tag uses the SRC=“. . 
attribute, which represents the the URL 
(location) of the image. For example: 

<IMG SRC - "opt1ca3.g1f”> 

This tag also uses the BORDER attribute, which can be 
used to turn off the border around a graphic used in a link. 
For example: 

<IMG SRC-”optica3.gif B0RDER-0> 



<TABLE>...</TABLE> 

A lag used to describes the beginning and end of a table. 
This tag uses the BORDER attribute toconu*ol the width of 
the border. For example: 

<TABLE B0RDER-0> or 
<TABLE B0RDER-1> 



<TD>...</TD> 

A tag used to describe the contents of a table cell. (Note: 
In Netscape, the contents of the Table Data cell are 
AUGN=LEFT.) 



<TH>...</TH> 

A tag used to describe the contents of a table header cell. 
(Note: The contents of the table header cell are bold and 
center — aligned by default.) Both the table data <TD> and 
the table header <TH> tags accept the WIDTH attribute. 
For example: 

<TD WIDTH-160> 

<TH WIDTH-160> 

<TITLE>...</11TLE> 

A tag used to describe the title of a document, which 
shows up inside a browser's title bar. 

<TR>...<n^R> 

A tag used to describe a table row. 
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Internet cafe 
owner John Scott 
shares tips on 
creating frames 



Summary: Use a two-frame layout to 
create a table of contents window and a 
window to display linked documents. 

By organizing a Web site's content in 
this way, frames become a navigation 
device. 




T he frame layout has become very popular on the 
Web. Much like panes in a window, this layout 
allows you to divide a page into rectangular frames. You 
can: 



• specify a unique HTML document to fill each frame 

• create independent links in a frame 

• create links in one frame to change content in 
another frame 

John Scott, who owns an Internet cafe in New York’s 
East Village, used a two-frame layout on the cafe’s Web 
site. The first frame acts as an index or table of contents 
containing links to content that is displayed in the sec- 
ond frame. 



54 . Chapter! 







1. Overview. 

To create his document, John created three separate HTML 
documents. 

a. Defining frame document, or compound document 

b. First frame document 
C- wSccond frame document 

The next three sections provide step-by-step examples of how 
each of these component documents are assembled. (Note: If 
you wish to follow the steps in this section, you may use the 
images provided in the alt.cojfee folder on the CD-ROM in the 
hack of this hook.) 




Above: John Scott used small JPEG 
images as links in the first frame. With 
its own scroll harand links to content in 
the .second frame, this frame acts as an 
index or table of contents. 




Defining frame document 



2. Create the defining frame document. 

The defining document, or compound document, uses the 
<FRAMESET> tag to open and close a set of frames. This tag 
replaces the <BODY> tag in an HTML document and defines 
the number and size of frames on a page. Web designers will 
notice that a frame document has a <BODY> tag. 

Inside the <FRAMESET> tag, John used the <FRAME> tag 
to define each frame. Following the <FRAMESET> tag, he 
added the <NOFRAMES> tag to display content viewable by 
browsers that do not support frames. 



a. Open SimpIeText U.se SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 
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Above: The ** Links'* graphic inside the 
alt. coffee table of contents frame. 
Below: A click on the Links graphic dis- 
plays a Links ** content page. Designed 
for Web newbies, ''Links ** contains a 
sampling of interesting places to visit. 




b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>al t. coffee. . . coffee, computers, comfy 
chai rs. 

</TITLE> 

</HEAD> 

c. Add a <FRAMESET> tag. Inside a <FRAMESET> 
tag, a COLS attribute may be used to create columns, or 
a ROWS attribute may be used to create rows. Although 
both can be used in the same <FRAMESET>, it is best 
to keep the number of frames to a minimum. (Note: 
Frame documents with too many frames have a history 
of making bmwsers crash.) In this example, John used 
the COLS attribute to create a two-frame layout. 

Column width may be set with an equal sign followed 
by an absolute pixel value, percentage values between 1 
and 100, or a relative scaling value where an asterisk 
represents the remaining space. 

Examples: 

<FRAHESET C0LS-”30%. 70%> 

<FRAMESET C0LS-"120 . *”> 

In the following source code, John Scott used an 
absolute pixel value for the first frame followed by an 
asterisk that causes the second frame to fill the remain- 
ing space. (Note: There is no space after the comma.) 

<HTML> 

<HEAD> 

<TITLE>al t. coffee. . . coffee, computers, comfy 
chai rs. 

</TITLE> 

</HEA0> 

<FRAMESET COLS-"120 .*'•> 



56- Chapter 2 





d. Add a <FRAME> tag. A <FRAME> tag defines a 
single frame. For his two-column frame layout, John 
needed two <FRAME> tags. Inside a <FRAME> lag, 
he added: 

• NAME attribute, which lets you assign a unique 
name to a frame. Name a frame and then refer to it by 
name with the BASE tag and TARGET attribute in 
content frame documents. This directs content into a 
frame. (Note: See Create the first frame document 
for an example of how the BASE tag and TARGET 
attribute are used.) 

• SRC attribute, which refers to the source HTML 
document. 

• NORESIZE attribute, which prevents visitors from 
dragging the divider bar to resize a frame. 

• M ARGINWIDTH and MARGINHEIGHT attributes, 
which allow you to specify the distance from the edge 
of a frame to the content inside the frame. 

• SCROLL attribute allows you to control whether the 
scroll bar appears in a frame. Set this to either auto, 
yes, or no. The default for this attribute is auto. This 
means the scroll bar appears if the content extends 
beyond the edge of the frame. 



Rrst frame (and other 
content frames) contains an 
<A HREF=”doc.htm* BASE 
TARGET =’*name"><IMG 
SRC="image.jpg"> 

</A> tag 






\ 


2d. 


Second frame 

1 



Defining frame document 
contains a <FRAME NAME=**name'' 
SRC="doc.htm"> tag 
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Above: The Info graphic inside the 
alt. coffee table of contents frame. 
Below: A click on the Info graphic 
displays an Infonnation content page. 
This page is designed to hold detailed 
infonnation about the cafe. 




Notice John’s two <FRAME> tags reside within the 
<FRAMESET> tag: 

<HTML> 

<HEAD> 

<TITLE>al t. coffee. . . coffee, computers, comfy 
chairs . 

</TITLE> 

</HEAD> 

<FRAMESET COLS-'’120 ,*’•> 

<FRAME NAME-'’menu" SRC-”menu . htm” 

NORESIZE MARGINWIDTH-"0” 

MARGINHEIGHT-"0” SCROLL-“yes”> 

<FRAME NAME-”ma1n” SRC-”home. html -ssi '• NORESIZE 
MARGINWIDTH-”0” 

MARGINHEIGHT-"0” SCROLL-”yes”> 

</FRAMESET> 

e- Add a <NOFRAMES> tag. For “frames-challenged” 
browsers, John added a <NO FRAMES> tag. His mes- 
sage inside this tag directs visitors to the Netscape site 
tor a Navigator download. 

<HTML> 

<HEAD> 

<TITLE>alt. coffee. . . coffee, computers, comfy 
chairs. 

</TITLE> 

</HEAD> 



<FRAMESET C0LS-”120 .*"> 

<FRAME NAME-'’menu" SRC-''menu . htm” 
NORESIZE MARGINWIDTH-*’0” 
MARGINHEIGHT-”0” SCR0LL-’'yes”> 

<FRAME NAME-”main” SRC-”home.htmV 
NORESIZE MARGINWIDTH-”0” 
HARGINHEIGHT-'’0" SCROLL-"yes’’> 

</FRAMESET> 

<N0FRAMES> 
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Above: The Flotsaoi graphic inside the 
ah. coffee table of contents frame. 

Below: A click on the Flotsam graphic 
displays a list of links to Shockwave and 
other entertainment pages created by 
Larry Rosenthal, owner of Cube 
Productions, Inc. 




<H1 ALIGN-CENTER<BLINK>Frame 
ALERT1</BLINKX/H1> 

<P> 

This document Is designed to be viewed using 
<B>Netscape 2.0</B>’s 

Frame feature. If you are seeing this message, you 
are using a frame <I>chal lenged</I> browser. 

<P> 

Please, try our <A HREF-*’http: //www.al tdotcof 
fee.com/ 

home.html -ssr'>un-framed</A> page or... 

<P> 

a <B>Frame-capable</B> browser can be downloaded 
from 

<A HREF-"http: //home. netscape. com/ ">Netscape 
Commun1cat1ons</A>. </P> 

</NOFRAMES> 

f. Add an ending lag. Complete the HTML document by 
adding an ending tag. 

</HTML> 

g. Save the file. Save the document in SimpleText or your 
word processor. If you’re using a word processor, save 
the text as Text Only. Give the file an .HTM extension. 

3. Create the first frame document. 

The first frame document or table of contents page may 
contain either text or graphic links to content on the rest of the 
site. John used small images as links. 

a. Open SimpleText. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 
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<HTML> 




Above: Premiere World is the cosponsor 
ofCyberchill, a monthly Internet social 
event that meets at alt. coffee, alt. coffee 
is also a .sponsor and the event is free to 
intere.sted cafe-goers. For details about 
upcoming Cyberchill meetings, check 
the Premiere Word link on the alt. coffee 
home page at 

http:/Av\v\v. altdotcoffee. com. 



<HEAD> 

<TITLE>icon menu for alt.coffee</TITLE> 

</HEAD> 

c. Add background color and text color. (Note: See the 
Online Tools chapter for details concerning color 
codes. ) 

<HTML> 

<HEAD> 

<TITLE>icon menu for al t . cof f ee</TITLE> 

</HEAD> 

<B0DY BGC0L0R-”#000000” TEXT-”00827F" 
VLINK-”#00827F" ALINK-’V/FF006E*’> 

d. Add a center tag. To make sure the links in the table of 
contents column are centered, use a <CENTER> lag. 

<HTML> 

<HEAD> 

<TITLE>1con menu for al t .cof fee</TITLE> 

</HEAD> 

<B00Y BGCOLOR-”#000000" TEXT-”00827F" 
VLINK-‘7/00827F” ALINK-"y/FF006E‘’> 

<CENTER> 

e. Add an anchor tag. In this example, John’s first image 
in the first frame is a link to the alt.coffee home page. 
Whenever there’s any other content displayed in the 
second frame, a click on this link will display the home 
page content. To create this link, add: 

• an HREF attribute and the name of the external file. 

• BAwSE and TARGET attributes to direct content into 
a named frame. (Note: See Creating a defining frame 
document for an e.xample of naming a frame.) 

• an image lag with a SRC attribute referencing an 
icon, a BORDER=() attribute to turn off the border 
around the icon, and an ALT attribute referencing 
text for browsers that cannot see images. 
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<HTML> 
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Above: tHUNK, a digital entertainment 
site on the Web, is produced by Cube 
Productions, Inc., a New Yorkd?ased 
new media Jinn. Cube owner Larry 
Rosenthal is a 3D world builder and 
new media designer who also chairs the 
NYVRMLSIG, which meets at alt. coffee. 
For details about the NYVRMLSIG, 
check the tHUNK link on the alt. coffee 
home page. 



<MEAOXTITLE>icon menu for alt.coffee</TITLE> 

</HEAD> 

<B0DY BGC0L0R-’*//000000" TEXT-”#00827F" 
VLINK-”//00827F” ALINK-'7/FF006E” > 

<CENTERXA HREF-”home . htmV BASE 
TARGET-"ma1n"XIMG SRC-”home_1 con. jpg'* BORDER-0 
ALT-*'HOME"X/AX/CENTER> 

f. Add line breaks. 

<HTML> 

<HEADXTITLE>1con menu for alt .coffee</TITLE> 

</HEAD> 

<B0DY BGC0L0R-*'//000000'* TEXT-*'//00827F" 
VLINK-”//00827F” ALI NK-’*y/FF006E" > 

<CENTERXA HREF-*'home . html'* BASE 
TARGET-**main'*XIMG SRC-**home_icon . jpg" 

BORDER-0 ALT-"HOME"X/AX/CENTER> 

<BRXBR> 

g. Add centered, decriptive text beneath the icon. (Note: 
Add more line breaks beneath the new text.) 

<HTML> 

<HEADXTITLE>icon menu for al t .coffee</TITLE> 

</HEAD> 

<B0DY BGCOLOR-"//000000" TEXT-"^00827F” 
VLINK-"#00827F" ALI NK-"#FF006E" > 

<CENTERXA HREF-"home . html ” BASE 
TARGET-"main"XIMG SRC-”home.icon. jpg" 

BORDER-0 ALT-"HOME"X/AX/CENTER> 

<BRXBR> 

<CENTER>h 0 m e</CENTERXBRXBRXBR> 
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Above: 3D world builder Lany 
Rosenthal created the 3D scenes 
for alt. coffee *s Palace site at 
toulouse.flotsam.com. In addition to 
virtual scenes of the real cafe, a back door 
leads from the a It. coffee back room to an 
elaborate under^wund lounge accessible 
through a door on a virtual subway plat- 
fonn ( look for dragons). 



h. Add more images and (ext to the first frame. By con- 
tinuing to add small image links with line breaks to the 
first frame document, the document will form a vertical 
table of contents. (Note: Due to space constraints, only 
two of the seven alt. coffee icon links are listed. If you 
are creating your own frame document with the images 
provided on the CD-ROM in the back of this book, you 
may follow these .sample links to create the remaining 
lints in the table of contents frame. Notice that the 
HTML in each new link is the .same, except for the icon 
file name and the descriptive text.) 

<HTML> 

<HEADXTITLE>1con menu for al t .coffee</TITLE> 

</HEAD> 

<B0DY BGC0L0R-’7^000000” TEXT-”#00827F" 
VLINK-*7/00827F” ALINK-"#FF006E" > 

<CENTERXA HREF-”home. html” BASE 
TARGET-”main"XIMG SRC-*’home_1con. jpg" BORDER-0 
ALT-"HOME"X/AX/CENTER> 

<BRXBR> 

<CENTER>h 0 m e</CENTERXBRXBRXBR> 

<CENTERXA HREF-"tal k. htm" BASE 
TARGET-"ma1n"XIMG SRC-"tal k. jpg" 

BORDER-0 ALT-"ALT. COFFEE TALK"X/AX/CENTER> 

<BRXBR> 

<CENTER>alt. coffee tal k</CENTERXBRXBRXBR> 

i. Add the ending tag. 

</HTHL> 

j. Save the file. Save the document in SimpleText or your 
word processor. If you're using a word processor, save 
the text as Text Only. Give the file an .HTM extension. 
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Above: Late in 1996, alt. coffee was the 
first stop on RlackSim Internationales 
virtual scavenger hunt. BlackSun built 
VRML versions of several Internet cafes 
across the country and contestants were 
asked to search for **cybenum crystals** 
hidden in each of the cafes. The first 
conte.stant to find crystals at all the 
cafes won a trip to Spain. 



4. Create documents for the second frame. 

A conienl document is similar to any ordinary HTML docu- 
ment. The document described below is the alt.coffee home 
page, which links to the icon at the top of the table of contents 
frame. (Note: This document is saved as ASCII text on the 
CD-ROM in the back of this book.) 

a. Open SimpleText. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>alt. coffee. . . coffee, computers, comfy 
chal rs . 

</TITLE> 

</HEAD> 

c. Add a background color and a text color to the 
document. 

<HTML> 

<HEAD> 

<TITLE>alt. coffee. . . coffee, computers, comfy 
chai rs. 

</TITLE> 

</HEAD> 

<B0DY BGC0L0R-”#000000'* TEXT-**#FFFFFF”> 

d. Add text and images. In this example, John used the 
following elements: 

• Font tag to change text size using the SIZE attribute, 
setting the font size relative to the base font size. 

Example: 

<F0NT SIZE-+1> 

This sets the font one size larger than the base font. 



Navigation 63. 





Above: 3D world builder Alex Shamson 
has been creating VRML models since 
1994. His Virtual Reality Mall at 
http://www. vnnill. com/Shopping. htm 
resides on the alt. coffee sender. 



• Anchor tag with a BASE TARGET=“_TOF’ 
attribute to make a linked page open in a new browser 
window. Alternatively, you can make a browser open 
a new window if you make the TARGET the name of 
a frame that doesn’t exist. 

Examples: 

<A HREF-”http: //WWW. blacksun.com/cyberroute96 
.html" BASE TARGET-”_TOP"> 

or 

<A HREF-”http://www.bl acksun.com/cyberroute96 
.htmr* BASE TARGET-”new'*> 

A new window will open in front of the current page, 
which will be left on the screen. 

• Paragraph tag with an ALIGN=CENTER attribute 
making text centered on a page. Options are LEFT, 
CENTER, and RIGHT. 

• MAILTO URL, which is used in an email link and 
usually placed at the bottom of a page. Viewers who 
click on a link containing a MAILTO URL will get 
an empty email form with the address filled out. 

<HTML> 

<HEAD> 

<TITLE>al t. coffee. . . coffee, computers, comfy 
chairs. 

</TITLE> 

</HEAD> 

<B0DY BGCOLOR-”//000000" TEXT-”//FFFFFF”> 

<P ALIGN-CENTER> 

<IMG SRC-”words.jpg" B0RDER-0> 

<P ALIGN-CENTER> 

<IM6 SRC-”dance.gif" B0RDER-0> 

<P ALIGN-CENTER> 

<F0NT SIZE-+l>Are you <I>SH0CKED</ I>? 
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Above: 3D world builder Uirry 
Rosenthal is chainnan of New York \s 
VRMLS I G, whichmeets at alt. coffee. His 
tHUNKWORLD VRML may he accessed 
thmugh links on the alt. coffee setver. 



Play alt. coffee’s <A HREF - ”http://www.altdot- 
cof f ee. com/ s hock. htm">ani mated 
homepage</A> . . .</F0NT> 

<P ALIGN-CENTER> 

<F0NT SIZE-+l>There’s a lot going on this 
month... hit our <A HREF-”/CALENDER.HTM">calen* 
der of events</A> for a complete listing. 

<P ALIGN-CENTER> 

<F0NT SIZE-+l>Get wired with the regulars at our 
<AHREF-"http: //www.al tdotcoffee.com/pal ace.htm"> 
Palace</A> sitel</FONT> 

<P ALIGN-CENTER> 

<A HREF-"http :/ /WWW. blacksun .com/cyber route96 

.htmV’ BASE TARGET-"_TOP”XIMG SRC-"1 ogo . gi f ” 
ALT-’’cyberroute 96" 

BORDER-OX/A> 

<P ALIGN-CENTER> 

<FONT SIZE-+2>Enter this <A 

HREF-" http: //WWW. blacksun.com/cyberroute96.htmr' 
BASE TARGET-"_TOP">virtual scavenger hunt</A> 
and <FONT COLOR-"#FFFFOO">WIN</FONT> a trip 
SPAIN!</FONT> 

<P ALIGN-CENTER> 

<A HREF-"/al tcoffe.wrl">vrml ,coffee</A> | 

<A HREF-"/palace.htm">Palace</A> | 

<A HREF-"/l 1nks.htm">L1nks</A> | 

<A HREF - "/real ity.htm">Real ity</A> | 

<A HREF - "/1nfo.htm">Info</A> 

<P ALIGN-CENTER> 

<A HREF - "http://www.flotsam.com" BASE 
TARGET-"_T0P">V1s1t fl otsam. com</A> | 
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Above: An anchor tag with a BASE 
TARGET^ **_TOP'* attribute, created in 
an HTML document intended to he frame 
content, makes a linked page open a new 
window. An example is the link shown 
above, which opens a page containing 
infonnation about BlackSun \s Scavenger 
Hunt. 



<A HREF - "http://www.premiereworld.com” 

BASE TARGET-"_TOP">Go to Prem1ereWorld</A> | 

<A HREF-"http://www. thunk. com" BASE 
TARGET-"_TOP">Tune into tHUNK! WORLD</A> 

<P ALIGN-CENTER> 

You are victim number 45 today and number 25408 
since Tuesday, October 29, 1996 11:52:23! 

<P ALIGN-CENTER> 

Any questions? Comments? E-mail me... <A 
HREF-"MAILTO: Jetsam@flotsam.com">webmaster 
®al tdotcoffee.com</A> 

<P ALIGN-CENTER> 

<F0NT SIZE--2>A11 Rights Reserved. No commercial 
usage of any part of this Website permitted 
without the written permission of alt. coffee, 
Inc. ©1995</F0NT> 

e. Add the ending tags. 

</B0DY> 

</HTHL> 

f. Save the file. Save the document in SimpleText or your 
word processor. If you’re using a word processor, save 
the text as Text Only. Give the file an .HTM exten.sion. 

g. Test the frame document. Open Netscape or 
Microsoft’s Internet Explorer browser. Open your 
document by selection Open File from the File pull- 
down menu. 
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Above: A link to the Word.com site 
accessed on the alt.coffee ** Links** frame. 



5. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification: 

<A>...c/A> 

Referred to as an anchor, this tag uses the HREF atu*ibute to 
link to an external file. For example: 

<A HREF-”http: //www.bl acksun.com/cyberroute96 
.html- BASE TARGET-”_TOP"XIMG SRC-"logo.gif 
ALT-"cyberroute 96" B0RDER-0X/A> 

(Note: The HTML file name must include the path name if 
the file is located in another directory. See Create the first 
frame document for details concerning the attributes used 
in John \s anchor tag.) 



<BODY>...c/BODY> 

A tag used to open and close the body of a document. 
This tag uses the BGCOLOR attribute to add color to the 
browser background, using standard color names and 
hexadecimal RGB triplet information in the fonn: 



<B0DY BGC0L0R-Blue> 

<B0DY BGC0L0R-"//ffffff"> 



<BR> 

A tag used to break a line. This tag does not require an 
ending tag. 



<FONT SIZE=VALUE>...</FONT> 

A tag ued to change the default font size. Values range 
from 1 to 7. The tag can also be written with a preceding 
+ or - to indicate a size that is relative to the basefont. 



<FRAME>. . .</FRAM E> 

A tag used to define a single frame. For example: 

<FRAME NAHE-”menu" SRC-"menu . htm" NORESIZE 
MARGINWIDTH-"0" HARGINHEIGHT-"0" SCROLL-"yes"> 

(Note: See Create the defining frame document/(9r 
details concerning the attributes John used inside the 
<FRAME> tag.) 
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Above: A link to the Seattle CAM 
accessed on the ali.cojfee Links frame. 
This view of Seattle is live and is updated 
every minute. 



<FRAMESET>...</rRAMESET> 

A lag used to define a set of frames. For example: 

<FRAMESET C0LS-"120 

(Note: See Create the defining frame document for 
details concerning the attributes John used inside the 
<FRAMESET> tag.) 

<H2>...c/H2> 

<H3>...</H3> 

Tags used to enlarge text, as to indicate a heading. Lower 
numbers indicate larger type, and the options range from 
<H I > through <H6>. 

<HEAD>...</HEAD> 

A tag used to open and close the header portion of an 
HTML document. 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<1MG> 

Used to refer to an image, this lag uses the SRC=*‘...” 
attribute, which represents the URL (location) of the 
image. This lag also uses the BORDER aliribule, which 
can be used to turn off the border around a graphic u.sed in 
a link. For example: 

<IMG SRC-"home_icon. jpg" B0RDER-0> 

<NOFRAMES>...</NOFRAMES> 

A tag used to add text that viewers can see if they are 
using a brow.ser that can't read frame code. 



<P>...<P> 

A tag used to indicate a new paragraph. Unlike the <BR> 
tag, this lag adds line spacing. An ending lag is optional. 

<TITLE>...</TITLE> 

A tag used to describe the title of a document, which 
shows up inside a browser’s title bar. 
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Artist featured in 
this chapter: 

Pejii Alawiisa is a 
graphic designer at 
Simon Schuster in 
New York City and has a 
degree in Advertising 
and Design from the 
Fashion Institute of 
Technology. 

peju_alawusa @ 
prenhall.com 

http://members. aol. com/ 
ala wusa/intro. lit ml 




NetObjects Fusion 

NetObjects Fusion is a new Web page design tool for graphic 
designers who wish to avoid HTML tags. Page elements 
may be imported and placed on a page much like they’re 
placed in a page layout software program. 

NetObjects Fusion builds HTML tags in the background 
(tables). The software is particularly useful for creating large 
sites because it provides centralized control over links as 
they’re updated. 

In this chapter, new media artist Peju Alawusa builds her 
own site and demonstrates NetObjects Fusion features by cre- 
ating her resume. Additional NetObjects Fusion features may 
be found in Chapter 1 2. Artist Frank DeCrescenzo uses 
NetObjects Fusion to build a site with image maps and a form. 





A new Web page 
layout tool for 
designers 

Summary: A Web page layout tool is 
now available for artists who really 
(Ion 7 like HTML tags. It 's called 
NetObjects Fusion, created by 
NetObjects, Inc. (http//www.netob- 
Jects.com). 



NetObjects 

FUSION 

Version 1 .0 



1996 NetObjects. Inc. All Mights Reserved 

NtTJb|«<ta 



N etObjects, Inc. was founded in November 1995 by 
Rae Technology and Studio Archetype (formerly 
Clement Mok Design). NetObjects Fusion is a unique new 
Web page layout tool that provides the ability to create Web 
pages without HTML lagging. 

1. 30-day software trial. 

Download a 30-day trial version of NetObjects Fusion from 
hltp://www.nclobjects.com. Documentation is available as 
an optional download. The software is only available for 
one 30-day trial and cannot be reinstalled. 

2. Hardware and software requirements. 

NetObjects Fusion is available for Power Macintosh or 
Windows 95/NT. To run the software on a Macintosh, you 
must have: 

• A Power Macintosh with a CD-ROM drive. 

• 10 MB of disk space for a minimum installation, or 60 MB 
of disk space for a complete installation. 

• 16 MB of RAM (24 MB is recommended). 

• System 7. 1 .2 or greater (System 7.5 is recommended). 

• Web browser software (an HTML 3.x complient browser). 
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Peju Alawusa’s 
tips on creating 
Web pages with 
NetObjects Fusion 




Above: Peju Alawusa *s home page con- 
tains an image map she created in 
NetObjects Fusion. To see her site on 
the Web, visit 

http://members. aol. com/alawiisa/intro 
.html. 
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Objective 

To foxthu obtain professional experience m the field of molomedia 
and other related visual arts media 

E}q>erience 
Sutiondfc Schuster 
Oraphic designer 

1230 Avenue of the Americas. New York 
tel 212696-1293 
August 1995 • Present 

Scholastic, Inc. 

Graphic designer 

4C0 Lafayene Street. New York 

March. 1995-July 1995 

Ainistad Press, Inc. 

Oraphic Designer 

1271 Avenue of tlie Americas. New York 
tel 212 5225270 
January 1994-January 1995 
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P eju’s resume is one of the pages she created for her Web 
site at http://members.aoLcom/alawusa/intro.html. In 
much the same way a designer creates a page in a page 
layout program, Peju positioned the page elements as 
draggable elements, and NetObjects created the HTML 
tags. (Note: If you wish to follow this example step-by-step, 
look for Peju *s art files on the companion CD-ROM. ) 
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1. Start NetObjects Fusion. 

a. Start NetObjects Fusion. 
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b. A New site dialog box will appear on your screen. 

{Note: If the New Site dialog box did not appear, select 
New Site from the File pidFdown menu.) 

c. Click on ihe Select button. 

d. In the dialog box that follows, select a folder where you 
would like to save your site, and click on Save. (Note: If 
you do not select your own folder, NetObjects Fusion 
will store the site in a User Sites folder inside the 
NetObjects Fusion folder.) 
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e. The path name to the folder you selected will be dis- 
played in the Save Site field on the New Site dialog box, 
as shown in Figure 1 e. A set of Autosites and Page 
Templates accompany the NetObjects Fusion software. 
A list of AutoSites, Tutorials, and Page Templates are 
displayed on the New Site dialog box. 

f. Type a name for your site in the field labeled Site Name 
at the top of the New Site dialog box, and click on OK. 
The site name will serve as a file name, which is given a 
.NOD extension. The site name will also be used as the 
subfolder name that stores the NOD file and the site’s 
assets. 
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Ig. 



g. A NetObjects Fusion Site screen will be displayed. 
(Note: The Site view will be where you create pages and 
a structure for your site,) 

2. Review the default preferences. 

A review of the NetObjects Fusion default preferences will 
help you understand how the software works. 

a. Select Preferences from the Edit pull-down menu. 

b. A Preferences dialog box will appear, with the General 
Preferences lab selected at the top of the dialog box. 
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c. The default sellings on this tab section include; 

• Autosave. Your site will be saved automatically. 

• Window maximized at Startup. Your opening 
screen will be a consistent size when you launch the 
software. 

• Preview Entire site. Pressing the Preview button will 
launch your selected Web browser and display the 
entire site. 

• WYSIWYG layout in Netscape browser. This opti- 
mizes your site in the Netscape brow.ser. 

d. Click on the Layout Preferences tab at the top of the 

Preferences dialog box. 
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e. The Layout Preferences page will be displayed. The 

default settings on this tab section include: 

• Times. The default proportional font. 

• Courier. The default monospace font. 

• Background Image Offset Although this is not 
selected at startup, setting the background image off- 
set in pixels will add a border to the page display. 
Leave this unchecked. 

• Snap to Grid. The default setting is off. Click to add 
a checkmark, and page elements will align with the 
page grid. 



Preferences . 
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f Select Browser ) 





3b. 



3. Select a browser for Web page previews. 

Select your Web browser in the Preferences dialog box. With 
a browser selected on your hard drive, NetObjects Fusion 
will be able to preview your page. 

a. Click on the General Preferences tab at the top of the 
Preferences dialog box. 

b. Click on the Select Browser button. 

c. In the dialog box that follows, locate the folder that 
contains your browser software, and click on Open. 

d. In the dialog box that follows, select your browser soft- 
ware, and click on Open. 





e. The browser will be listed below Current Browser in the 
Preferences dialog box. 




3e. 
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4. Create Web pages and label them. 

a. In NelObjecis Fusion’s Site view, locale the New Page 
button at the top of the screen. Notice that the home page 
icon is highlighted, indicating that it is selected. 



Highlighted home page Icon New Page button 





4b. 



b. Click on the New Page button four times. 

c- This will create four “child” pages beneath the home 
page, as shown in Figure 4c. (Note: A triangle will 
appear at the bottom of the home page icon, indicating 
that it is a parent. Triangles on the side of a page icon 
indicate the page is a sibling. Pages may be repositioned 
at any time by dragging them.) 




triangle 



Unltfled 



Untitled 



Urided 



Unntied 



4c. 
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d. Click on the word Untitled in the first child page you 
created, and type: 

resume 

Press the Tab key to move the highlighted outline to the 
second child page you created, and type: 

portfol io 

Press the Tab key to move the highlighted outline to the 
third child page you created, and type: 

i nterest 

Press the Tab key to move the highlighted outline to the 
fourth page you created, and type: 

1 inks 

e. Click to select the page labeled portfolio, and click on 
the New Page button twice. Peju labeled the two new 
child pages advertising and rnisc. 

f. Click to select the page labeled interest^ and click on the 
New Page button three times. Peju labeled the three new 
child pages muzik, poetry, and literature. 
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g. Peju changed the label on the home page to Intro. (Note: 
When you *re huilding a large site, the display of page 
icons may he collapsed by clicking on the small triangles 
beneath the parent page icons.) 






5. Change views, and add art to a page. 

The NetObjects Fusion Page view is the layout area where 
Web pages are created. 

a. In the Site view, double-click on the page labeled 
resume. 

b. NetObjects Fusion’s Page view will be displayed. Notice 
that the screen contains a default page banner labeled 
resume. 




5b. 
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c- Select the Selection Tool. 

d. Click to select the page banner, and press the Delete key 
to delete it. 

e. Click to select the set of default navigation bars, and 
press the Delete key to delete the row. 





f- Drag the page divider that separates the header from the 
body, and move it up to make more room. 

g. Select the Picture Tool. 

h. Draw a picture box at the top of the page, as shown in 
Figure 5h. 
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i. When you release the mouse buUon, an Open File dialog 
box will appear. 

j. Use the File List window in the Open File dialog box to 
locate your art or Peju’s image called resname.gif. Click 
on Open. Interesting features related to how NetObjects 
Fusion handles images include: 

• The software supports a wide variety of image for- 
mats, including BMP, PICT, PCX, Photoshop, TGA, 
and Uncompressed TIFF. NetObjects Fusion will con- 
vert these alternative formats to GIF or JPEG. The 
software will present a dialog box where you may 
select JPEG or GIF. 

• Pictures may be cropped by changing the shape of the 
bounding box. 

• GIF images may be converted to tranparent GIFs 
inside the NetObjects Fusion software. The software’s 
Transparency Tool may be used to select the color to 
make transparent. 

k. The ail will fill the picture box you’ve drawn, as shown 
in Figure 5k. 

l. Repeat Steps 5g through 5k to import Peju’s other 
image, called funky3.jpg, as shown in Figure 51. 
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6. Use the Draw Tool to create a rule. 

a. Select the Draw Tool. 

b. Draw a vertical rule along the length of Peju’s second 
image, as shown in Figure 6b. 

c. (Option) Use the Properties dialog box to alter the color 
or weight of the rule. 




vertical bar 



6b. 




7a. 



7. Add text to a page. 

a. Select the Text Tool. 

b. Draw a text box, as shown in Figure 7b. 

c. When you release the mouse button, you will see a blink- 
ing cursor in the upper-left corner of the text box. Type: 

Objective 
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d. Drag-select the word Objective. 

e. Click on the bold button in the Properties dialog box. 




bold 

7o. 





7g. through 7n. 



f. Press Return, and type: 

To further obtain professional experience in the field 
of multimedia and other related visual arts media. 

g. Press Return, and type: 

Experience 

Notice a Return adds a line break and line spacing. 

h. Drag-select this word, and add boldfacing. 

i. Hold down the Shift key, press Return, and type: 

Simon & Schuster 

Notice that a Shift + Return adds a line break without 
line spacing. 

i- Hold down the Shift key, press Return, and type: 

Graphic designer 

k. Hold down the Shift key, press Return, and type: 

1230 Avenue of the Americas. New York 

l. Hold down the Shift key, press Return, and type: 
tel: 212-698-1293 

m. Hold down the Shift key, press Return, and type: 

August 1995-Present 

n. Peju added the remaining text. 
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8a. 




8b. 



8. Preview the Web page. 

a. Click on the Preview button. 

b. A preview status bar will be displayed. 

C- NetObjects Fusion will launch your selected browser 
and display your page. (Note: For details on how to 
select a browser in the NetObjects Fusion Preferences, 
see Steps 3a through 3e.) 

d. Select Quit from the Netscape File pull-down menu to 
put the browser away. (Note: Leave the browser open if 
you have plenty of RAM memoiy.) 
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9. Edit the text. 

Remove the line spacing beneath the word Objective. 

a. Click before the letter Tin the line of text below the 
word Objective. This will insert your cursor in the text. 
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b. Press the Delete key to close up the space. 

c- Hold down the Shift key, and press Return. 

d. A line break will be added with no extra line spacing. 
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e. Repeat Steps 8a through 8d to re-preview the page. 




9e. 
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10. Remove the default links in the footer. 

a. Scroll to the bottom of the page. 

b. Select the Selection Tool. 

c. Click on the default text links in the Footer, as shown 
Figure lOc. 

d. Press the Delete key to delete the text links. 
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e. Click on the default NetObjects Fusion button link in the 
Footer, as shown in Figure 1 Oe. 

f. Press the Delete key to delete the button link. 

11. Lengthen the page. 

a. Click on the Layout tab at the top of the Properties 
dialog box. 

b. The Layout page of the Properties dialog box will be 
displayed. 

c. Click on the up aiTOw next to the field labeled Height. 
Add 100 pixels to the height of the page by clicking on 
the up arrow. 






12a. 



12. Add a text link to the body. 

a. Select the Text Tool. 

b. Drag a text box inside the body of the page, as shown in 
Figure 1 2b. 

c. When you let go of the mouse, you’ll see a cursor inside 
the text box. 




text box 
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12d. 



d. (Option) Select the Zoom Tool. 

e. (Option) Click on the new text box with the Zoom Tool 
to zoom in. 

f. Type: 

Top Page 
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g. Click on the Text tab at the top of the Properties dialog 
box. 

h. The Text page of the Properties dialog box will be 
displayed. 

i. Click on the Center button in the Properties dialog box. 




12h. 
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j. The text will be centered in the text box. 
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13. Create a link. 

Text and pictures can be linked to any other point on the Web 
or any point within your site. Link segments of text, ele- 
ments you draw, pictures, or areas inside pictures in the form 
of an image map. NetObjects Fusion has three types of links. 
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These include: 



• Page Links. This type of link leads to pages within your 
site. If you move the page within the site or change the 
name of the page, the link follows. Peju created this type 
of link at the bottom of her resume to link to the top of the 
page. 

• Smart Links. This type of link is based on the relative 
position of a page, not a name. Use this type of link when 
there are many layers or branches in your site. Entire 
branches may be moved and the links will be maintained. 

• External Links. This type of link points to other pages on 
the Web. A URL is required in this type of link. 

a. Drag-select the words Top Page. 
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b. Click on the Link button in the lower-left comer of the 
Properties dialog box. 

c- A Link dialog box will be displayed, 
d. Click in the field labeled Page Name, and type: 
resume 
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e. A wStalus dialog box will be displayed, notifying you of a 
successful link. 

f. The words Top Page will have an underline, indicating 
the text is now a link. 
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14. Peju’s Web site. 

Peju used the techniques described in this section to complete 
the remaining pages on her site. Using NetObjects Fusion’s 
built-in commands for building the site’s structure and links, 
Peju found that her site was easy to construct. 

When the pages were complete, Peju staged the site, or tested 
the pages, on her local hard drive. When she was satisfied 
with the results, she published the site by using NetObjects 
Fusion’s built-in FTP software to transfer the files to her 
provider’s server. The steps to stage and publish a site are 
described in the next sections. Look for Peju’s complete Web 
site on the companion CD-ROM and at http://memhers.aol 
. com/alawusa/intro. html. 

15. Stage your site. 

When you have completed your Web site, you’re ready to 
publish it or create the HTML pages you’ll need for the Web. 
Staging is considered to be a step prior to final publishing. 
Preview displays a page in HTML fonnat. Although staging 
or publishing is similar to previewing a page, an FTP client 
built into NetObjects Fusion may be used to upload your files 
to any remote server. 

During staging, NetObjects Fusion collects all the files asso- 
ciated with your site — both external and those generated by 
NetObjects Fusion. NetObjects Fusion refers to these files as 
as.sets, which may include the following elements: 

• images 

• sounds 

• video 
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• applets 

• plug-ins 

a. Before you stage your site, build a folder for the site 
somewhere on your hard drive or locate the host name, 
the directory name, your user name, and the password 
for the remote server where you’d like to stage your site. 

b. Click on the Publish button. 

C- The Publish site will be displayed. 

d. Click on Settings. 
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e. A Configure Publish dialog box will be displayed. The 
Local radio dial is the delault selection in the Location 
section of the dialog box. In this sample, Peju used the 
local hard drive to stage a Web site. 

f. Click on the Select button in the Location section of the 
dialog box. 




15o. 
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g. In the dialog box that follows, select the folder on your 
hard drive where you would like to stage your site, and 
click on Open. 

h. Click on the OK button at tlie base of the Configure 
Publish dialog box. 

i. Click on Stage button on the Publish site. 





j. A status bar will be displayed. 

k. When the staging is complete, a Staging Is Complete 
dialog box will be displayed. Click on OK. 
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stoging is Complete. 
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16. Test your site with your browser. 

a. Launch Net.scapc or the Internet Explorer browser. 



Netscape Navigator^ 
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b. Select Open File from the File pull-down menu. 

c. In the dialog box that follows, locate the folder where 
your files have been staged, and click on Open. 

d. In the dialog box that follows, select your site’s home 
page, and click on Open. 
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e. Your home page will be displayed in a browser window, 
f- Test your site. 

g. Select Quit from the File pull-down menu to put away 
the browser. 
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17. Publish your site. 

When you are satisfied that everything in your site functions 
properly, you’re ready to publish it. 

a. Before you publish your site, locate the host name, the 
directory name, your user name, and the password for 
the remote server where you’d like to publish your site. 

b. Click on the Publish button. 

c. The Publish site will be di.splayed. 

d. Click on Settings. 
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e. A Configure Publish dialog box will be displayed. 

f. Click on the Remote radio button, and click on the 
Configure button. 




17e,17f. 
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g. A Remote dialog box will be displayed. {Note: If you do 
not know the following infonnation to add to the Remote 
dialog box, contact the Internet service provider who 
manages your Web sender. ) 

h. In the field labeled Remote Host, type the name of your 
server. 

i. In the field labeled Base Directory, type the path name 
of the remote HTML folder where you wish to transfer 
your files. 

j. In the field labeled CGI Directory, type the path name of 
the CGI directory. 

k. In the field labeled User Name, type your user identifi- 
cation. 

l. Click on Remember Password. 

m. In the field labeled Password, type your password, 
and click on OK. 




17h through 17m. 
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n. Click on the Publish button in the Site view, 
o- A status bar will be displayed with a message that reads: 
opening an ftp connection 
transferring files 

p. When the publishing is complete, a Publishing Is 
Complete dialog box will be displayed. Click on OK. 





Publishing Is Compiotn, 
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( Note: You may also move your newly published pages to 
your Web site with Jim Mathew's Fetch. Fetch is a 
Macintosh FTP shareware utility. Publish to your hard drive 
and then move the contents of the Preview folder to your 
directory on your provider's Web server. For further details 
on how to use Fetch, see Use Fetch to upload your files to a 
provider's server in the Client-Side Image Map chapter). 
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Chapter 




Writer and media 
specialist featured 
in this chapter: 

Peter Barry Chowka is 
a journalist, medical- 
political analyst, lecturer, 
and consultant. For over 
two decades, his work in 
print, broadcasting, still 
photography, nonfiction 
films, and now the 
Internet has documented 
the promise of nontoxic, 
innovative, and tradition- 
al approaches to healing. 
Chowka has been a con- 
sultant to network televi- 
sion and the U.S. 
Congress and was 
appointed to the first 
advisory panels of the 
NIH Office of Alternative 
Medicine. 

pbc@usa.net 

http.V/membets. aoL com/ 
mediumcool 




Style Sheets And 
New HTML Text 



In this chapter, writer Peter Barry Chowka shares information on 
how to use style sheets to simplify HTML tagging in text-heavy 
documents. Peter’s 1994 interview with Linus Pauling is format- 
ted for viewing in Microsoft’s Internet Explorer browser, the first 
browser to include cascading style sheets (CSS 1) as defined by 
the World Wide Web Consortium. The Internet Explorer browser 
broke ground with this powerful new feature, which is expected 
to be added to Netscape’s Navigator in version 4.0. (Note: The 
World Wide Web Consortium, or W3C, is a standards organiza- 
tion that oversees the evolution of HTML) 

Also covered in this chapter are Netscape’s new <MULTICOL> 
tag, which formats text in newspaper-like columns, and the 
<FONT> tag’s new attributes, which can control a font’s color 
and typeface. 

In less than a year, Microsoft plans to introduce a new form of 
embedded font technology they’ve codeveloped with Adobe 
Systems. Pages with embedded fonts will include font data that 
travels with a page — freeing a Web viewer from the need to pre- 
install fonts. The technology will be implemented in the Internet 
Explorer browser, and the two firms will present an OpenType 
proposal to the World Wide Web Consortium. 





Microsoft 
style sheets 
offer formatting 
features such as 
point size, page 
margins, and 
leading 

Summary: By the Spring of 1997, both 
Microsoft *s Internet Explorer browser 
and Netscape 's Navigator version 4.0 
will provide extensive style sheets. 

With desktop publishing — like controls, 
Web authors will no longer need 
workarounds like the <BLOCKQUOTE> 



F or type to look good on a page, text line length should 
not extend across the entire width of a document. With 
a shorter line length, the reader does not have to work to 
visually keep track of type as he/she reads from left to right. 

Until now, designers who wanted to apply this principle to 
a Web page had to use tags that were never intended to 
indent text. Examples include the <BLOCKQUOTE> and 
<DL> tags. 

Style sheets built into Microsoft’s Internet Explorer browser 
now offer a designer powerful controls over formatting chtu*- 
acteristics such as margins, point size, and leading. 
Netscape’s Navigator will soon have similar controls built 
into version 4.0 of the software. 

In this section, Peter Barry Chovvka — journalist, medical- 
political analyst, and consultant — demonstrates how to for- 
mat a page with style sheets built for Microsoft’s Internet 
Explorer browser. The steps he uses to fomiat his interview 
with the late Dr. Linus Pauling offer an ideal model for 



tag for margin indents. 




Above right: Peter Barry Chowka 's 
intendew with Linus Pauling 
formatted with style sheets built into 
Microsoft's Internet Explorer browser. 
Above: Peter's file opened up in 
Netscape Navigator version 3.0. 
Netscape will not have style sheets 
added until version 4.0. 
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Above: Peter's photograph of Linus 
Pauling during his first inten>iew with 
the Nobel laureate, who was then 79, in 
his office at the Linus Pauling Institute 
for Science and Medicine in Menlo 
Park, California, in 1980. Peter recalls, 
"It's always humbling to spend time 
with an individual of Pauling's stature. 
But / came away from that first of many 
encounters with Pauling enjoying a new 
respect for the man, based not only on 
his intellect but his highly engaging, 
accessible, down-to-earth, feisty, enthu- 
siastic, and energetic reaction to meet- 
ing me and to my many questions. The 
bright twinkle in his eye on that summer 
day is, / hope, captured in the photo 
above." 



designers to follow. (Note: Look for the Linus Pauling inter- 
view on the CD-ROM in the back of this book and at 
http://members.aol. com/mediumcool. ) 

1. What is a style sheet? 

A style sheet is a system that lets you define formatting 
characteristics such as font size, font style, font color, font 
weight, leading, margins, and indents in summary form at 
the top of an HTML document or in a separate style sheet 
file. This eliminates the need for complex lagging 
throughout a document and provides an efficient method 
to make changes, because the fonnalting information is 
organized in one place. 

Although Microsoft is the first to build style sheets into its 
browser, the concept is not unique to Microsoft. Style 
sheets for Web browsers have been defined by the World 
Wide Web Consortium (W3C), and Microsoft’s imple- 
mentation follows the cascading style sheet (CSS 1 ) mech- 
anism found in the W3C proposal. (Note: For details 
about the W3C style sheet proposal, see http://www 
.w3.org/pub/WWW/TR/WD-cssl.html.) 

2. Frequently asked questions. 

Although style sheets offer a gieater amount of control 
over page layout, many designers may be concerned about 
using HTML features that are new. Here are answers to 
popular questions: 

a. Are style sheets appropriate for every HTML 
document? As in print, style sheets make sense when 
documents have a large amount of text. The mecha- 
nism requires fewer tags in the text and greater control 
over changes. However, designers may also be inter- 
ested in style sheets for smaller documents because of 
the point size and leading controls. 

b. If I use stjie sheets designed for the Internet Explorer 
browser, what will the page look like in Netscape’s 
Navigator? Handan Selamohlu, who wrote A User's 
Guide to Style Sheets for Microsoft’s Developer 
Network (http://www.microsoft.com/work.shop/author/ 
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Above: A photo Peter took during a 
videotaped documentary interview he 
produced in / 989 with Pauling and 
Ewan Cameron (right), the Scottish 
physician whose promising work in the 
early 1970s with vitamin C and terminal 
cancer patients inspired Pauling to 
become more involved in the field of 
vitamin C, antioxidant nutrients, and 
non toxic cancer therapies. Peter 
remembers Dr. Cameron, who before his 
death was medical director of the Linus 
Pauling Institute, as an intellectually 
impressive and highly engaging clini- 
cian. In 1979, the two doctors co- 
authored the popular hook. Vitamin C 
and Cancer. 



howto/css-f.hlin) has invented a trick ibr designers who 
are creating pages for multiple browsers. Until Netscape 
implements style sheets, embed your style definitions 
within a comment tag. (Note: For details on how to imple- 
ment this step, see Creating the Linus Pauling inter\'iew 
in this chapter.) 

c. Will st>ie sheets support the Postscript screen fonts 
popular among graphic designers? For information 
concerning the Adobe/Microsoft OpenType initiative 
incorporating Type 1 and TrueType data for Web pages, 
see Microsoft's plan to add fonts to the Web: Free 
TrueType now and Web page font embedding in the 
future at the end of this chapter. 

d. If a Web viewer does not download and install a font 
specified by a style sheet, what will the browser dis- 
play? A browser that cannot read style sheets or the 
<FONT FACE> tag will display the default typeface. 

e. Are there any tags that will override formatting cre- 
ated by a style sheet? Yes. Inline style tags override 
style sheet summaries arranged at the top of a docu- 
ment or in a separate style sheet file. 

The style sheet summary block arranged at the top of a 
document is relbrred to as an embedded style sheet and 
a style sheet organized in a separate file is called a 
linked style sheet. In total, there are three forms of style 
sheets that follow precedence rules: 

• inline style tags override embedded style 
definitions. (Note: For an example of how an inline 
style tag can he used to override an embedded style 
tag, see Creating the Linus Pauling interview in this 
chapter. ) 

• inline style tags override linked style definitions. 

• embedded style definitions override linked style 
definitions. 

f. Where can 1 learn more about Microsoft style 
sheets? See Microsoft’s Style Sheet Showcase at 
http:/Avww.microsoft.com/gallery/file.s/styles/default 
.htm. Style Sheets: A Brief Overview for Designers 
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Above: In 1983, Pauling invited Peter 
to his remote ranch overlooking the 
Pacific Ocean near Big Sun California, 
fora day-long visit and another exten- 
sive recorded inteiview. Peter writes, 

‘7 was honored to be able to observe 
Pauling in his favorite place, inspired 
by the majesty ofthe Pacific, surround- 
ed by books and scientific papers repre- 
senting the many high-level projects he 
was involved in. Pauling graciously 
accommodated my many recpiests to 
photograph him, and one of my 
favorites (above) was taken that after- 
noon on his deck with the stormy ocean 
just yards away.*' 



at htlp://vvww.microsoft.com/workshop/design/des- 
gen/ss/css-des.htm, and/\ User's Guide to Style Sheets 
at hUp://www.microsofl.coniyworkshop/ author 
/howto/css-f.htm. 

g. Can st>ie sheets be transferred to another HTML 
document? A style sheet may be saved as a .CSS doc- 
ument and then linked to any number of Web pages on 
your Web site. (Note: Microsoft's implementation of 
style sheets is new, and at the lime of this wiiting, / 
could not get style sheet linking to work. As a result, 
this topic will not be included in this chapter. ) 

3. Style sheet properties. 

The style sheets built into Microsoft's Internet Explorer 
browser offer a wonderful shift away from awkward 
workarounds such as the <BLOCKQUOTE> tag for mar- 
gins. In this system, style sheet properties such as margin- 
left and margin-right get added to familiar HTML tags. 
(Note: For details on style sheet tag syntax, see Adding 
style sheet properties to a tag in the next section. )Jhc style 
sheet properties that have been implemented in version 3.0 
of the Microsoft Internet Explorer browser include: 

a. font-size may be set in points, inches, centimeters, 
pixels, or a percentage value that is evaluated based on 
the default point size (pt, in, cm, px, or %). 

b. font-family sets a typeface name. Alternative family 
names or generic family names may be specified for 
systems that don’t support a designer’s choice of type- 
face names. Generic family names include serif, sans 
serif, cursive, fantasy, and monospaced. 

c. font-weight sets the thickness of type. Examples 
include extra light, light, demi-Iight, medium, demi- 
bold, bold, and extra bold. Weights depend on the 
weights allowed in a user’s system. 

d. font-style .sets italic text. Although the W3C draft al.so 
includes small caps, Internet Explorer only supports 
normal and italic. 

e. line-height sets leading or the distance between the 
ba.selines of type. Leading may be specified in points. 
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Above: Included in Microsoft \s Web 
Gallery at http://www.microsoft.com/ 
gallety are links to pages containing 
usefid infonnation about style sheets. 



inches, centimeters, pixels, or a percentage value (pt, 
in, cm, px, or %). Internet Explorer adds spacing 
before lines and not after lines. 

f . color may be specified as a named color or as a 
hexadecimal red-green-blue triplet. 

g. text-decoration allows you to use underlined and 
strike-through text. W3C also supports overline and 
blink, which have not been added to the Internet 
Explorer browser. 

h. margins may be specified in points, inches, centime- 
ters, or pixels (pts, in, cm, or px). Internet Explorer 3.0 
allows negative values for margin-left, margin-right, 
and margin-top for special effects or “outdents.” 

i. text-align sets text as left, right, or center-aligned. 

j. text-indent sets, indentation in points, inches, cen- 
timeters, or pixels (pts, in, cm, or px). Internet Explorer 
3.0 allows negative values for text-indent, providing 
for special effects or “outdents.” 

k. background (color or images) may be used on any 
elements by specifying a color name, an RGB triplet, 
or an image’s URL. 



4. Adding style sheet properties to a tag. 

There are two methods for placing style information with- 
in a document. 

a. Inline style tags are adaptations of familiar HTML 
tags. Style definitions get added to an HTML tag by 
using the STYLE attribute. 

Examples: 

<H1 STYLE-"margin-left ; 0.5 1n; margin-right: 

0.5 in"> 

or 

<P STYLE-"margin-left: 0.5 in; margin-right: 

0.5 in”> 
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Above: Microsoft is ojfe ring free 
TrueType fonts on their site at 
http: //WWW. microsoft. conx/truetype/ 
fontpack/defaiilt. htmfor both 
Macintosh and Windows computers. 
(Note: For details concerning 
Microsoft *s free TrueType offer, see 
Microsoft’s plan to add fonts to the 
Web: Free TrueType now and Web 
page font embedding in the future in 
this chapter.) 



b. An embedded style sheet gets added to the top of a 
document using the <STYLE>. . .</STYLE> tag. Use 
this lag between the <HTML> tag and the <BODY> 
tag. The <STYLE> tag’s TYPE attribute specifies tJie 
Internet Media type as “text/css.” Tliis allows browsers 
that do not support this Media type to ignore style 
sheets. Use the comment tag to enclose the style defini- 
tions that get added inside the <STYLE>. . .</STYLE> 
tag as plain text. By enclosing the .style definitions in a 
comment tag, browsers that do not support style sheets 
will not read style definitions as plain text. 

Example: 

<STYLE TYPE-”text/css”> 

<!-- 

HI {color: #FF5200; font-size: 40 pt; font-family: 
Verdana, Arial, Helvetica, sans-serifl 

P {color: #D1D1D1; font-size: 13 px: font-family: 
Verdana. Arial, Helvetica, sans-serif} 

--> 

</STYLE> 

5. Option: Grouped formatting. 

a. If the formatting specifications are the same for sever- 
al tags, group the tags into one tag. In the following 
example, HI, H2, and H3 all have the same style 
definitions: 

Example: 

<STYLE TYPE-”text/css”> 

<!-- 

HI, H2. H3 Icolor: //FF5200; font-size: 40 pt; 
font-family: Verdana, Arial, Helvetica, sans-serif) 

--> 

</STYLE> 
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Above: Check littp://ww\\\micwsoft 
x'oni/truetype/ie.xplor/quick.htm for a 
useful three-step guide to adding typog- 
raphy to your Web pages. 



b. Foimalting specifications may also be abbreviated. 
Notice in the following example that the word font 
occurs only once. 

Example: 

<STYLE TYPE-‘’text/css”> 

<!-- 

HI {font: 40 pt Verdana. Arlal. Helvetica, 
sans-serl f ) 

--> 

</STYLE> 

6. Option: Classes. 

a. Use classes to create variations for a single HTML tag. 
Follow a tag name with a period and a class name. Any 
number of classes are allowed. (Note: See Creating the 
Linus Pauling \nior\\ow for details on how to create 
tags with classes.) 

Example: 

<STYLE TYPE-*‘text/css”> 

<!-- 

BODY (margin-left: 0.51n; margin-top: 0.51n) 

BODY. main (font-size: 12pt; font-weight: light; 
line-height: 14pt; margin-left: lin; margin-right: 
lin; margin-top: lin) 

BODY. callout (font-size: IBpt; font-weight: light; 
line-height: 22pt; margin-left: 2in; margin-right: 
2in) 

BODY. references (font-size: lOpt; font-weight: 
light: line-height: 12pt; margin-left: lin; margin- 
right: lin) 



</STYLE> 
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b. It is not necessary to repeal tlie lag name. Classes may 
be abbreviated with a period and a class name. 

Example: 

<STYLE TYPE-”text/css”> 

<!-- 

BODY {margin-left: 0.51n; margin-top: O.Bin) 

.main (font-size: 12pt: font-weight: light; line- 
height: 14pt; margin-left: lin; margin-right: lin; 
margin-top: lin) 

.callout (font-size: 18pt; font-weight: light; line- 
height: 22pt; margin-left: 2in; margin-right: 2in) 

.references (font-size: lOpt; font-weight: light; 
line-height: 12pt; margin-left: lin: margin-right: 
lin) 

--> 

</STYLE> 

7. Creating the Linus Pauling interview. 

a. Use a manuscripl or create thumbnails lo mark up lexl 
with lags you Ihink you’ll need. In this example, Peler 
used: 

• HI, H2, H3, and H4 lo mark Ihe subheads in his 
manuscript. This provides an opportunity for quick 
changes in the style sheet header after the style 
block is in place at the top of the HTML docu- 
ment. 

• Two <BR> tags between paragraphs because the 
<P> tag adds too much leading. (Note: There 
should be no more than what appears to he a sin- 
gle line space between paragraphs.) 

• To create variations in body text, Peter used classes 
in the <BODY> tag using the words .normal and 
.opener. He then used the <DIV> tag to divide the 
document according lo class. 
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Above: Check lutp://w\\>w.micwsoft 
xoni/truetype/faq/fcui^ fora list of 
frequently asked questions ( FAQ) con- 
cerning Microsoft's free TrueType fonts. 



Example: 

<DIV cl ass-normal > 
and 

<DIV class-opener> 

Peter could then control the properties of normal 
and opener text in the style block at the top of the 
page to make changes in type style and weight. 

b. Open SimpIcText. Use SimpleText or your word 
processor, [f you use a word processor, be sure to save 
the document as Text Only. 

c. Create a new' HTML document. Start a new docu- 
ment with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

d. Create a style block at the top of the document. Use 
the <STYLE>. . .</STYLE> lag between the <HTML> 
tag and the <BODY> tag. Use the <STYLE> tag’s 
TYPE attribute to specify the Internet Media type as 
“text/css”. 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-"text/css”> 

e. Add a comment tag. Until Netscape implements style 
sheets, embed your style definitions in a comment tag. 
(Note: See Style sheet properties and Adding style 
sheet properties to a Vdg for details on style definitions,) 

<HTHL> 

<HEAD> 
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Tip: In May 1996, Microsoft 



<TITLE>Linus Pauling. Ph.D.: The Last Interview by 



announced news of their OpenTypc 
Initiative. Also known as TrueType 



</TITLE> 



Peter Barry Chowka 



Open Version 2, OpenType is an exten- 
sion of Microsoft 's TrueType Open 
format, adding support for Adobe Type 
I data. This font technology represents 



</HEAD> 



<STYLE TYPE-”text/css”> 



<!- 



a merger of Adobe \s and Microsoft \s 
font technologies, offering a unified 
system for font handling across plat- 
forms. 



f. Add tags and styie properties to the style block. 



<HTML> 



<HEAD> 



<TITLE>L1nus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-”text/css”> 

<!-- 

BODY {margin-left: lln; margin-right: 1.51n) 

.opener (font-size: 20 pt; font-weight: extra light; 
font-style: Italic; line-height: 22pt; font-family: 
Times New Roman; margin-left: lln; margin-right: 
.Bin) 

.normal (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 16pt; font- 
family: Times New Roman] 

.references (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left: 1.2in; 
margin-right: .Bin) 

B 1 font-weight: extra bold; font-style: normal; 
font-size: 14 pt; line-height: 16pt; font-family: 
Arlal) 

HI (font-weight: extra light; font-style: Italic; 
font-size: 20 pt; line-height: 22pt; font-family: 
Times New Roman) 

H2 (font-weight: extra bold; font-style: normal; 
font-size: 24 pt; line-height: 26pt; font-family: 
Times New Roman) 
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Tip: Adobe and Microsoft will submit a 
proposal for Web page font embedding 
using OpenType to the World Wide Web 
Consortium committee on style sheets. 
The proposal suggests that font data 
should travel with a document, freeing 
the user from the need to download and 
install fonts. 


H3 {font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

H4 (font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

g. Close the comment tag. 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-"text/css*'> 

<!-- 

BODY (margin-left: lin; margin-right: 1.5in) 

.opener (font-size: 20 pt; font-weight: extra light; 
font-style: italic; line-height: 22pt; font-family: 
Times New Roman; margin-left: lin; margi n- right : 
.Bin) 

.normal (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 16pt; 
font-family: Times New Roman) 

.references (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left: 1.2in; 
margin-right: .Bin) 

B (font-weight: extra bold; font-style: normal; 
font-size: 14 pt; line-height: 16pt; font-family: 
Arial) 

HI (font-weight: extra light; font-style: italic; 
font-size: 20 pt; line-height: 22pt; font-family: 
Times New Roman) 

H2 (font-weight: extra bold; font-style: normal; 
font-size: 24 pt; line-height: 26pt; font-family: 
Times New Romani 
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Tip: The TrueType fonts Microsoft 
distributes on their site may be used in 
applications other than HTML author- 
ing pwgrams. (Note: The fonts have 
been optimized for on-screen display. ) 



H3 (font-weight: extra bold; font-style: normal; 
font-size; 12 pt: line-height: 14pt; font-family: 
Times New Roman) 

H4 (font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

--> 

h. Close the style block. 

<HTML> 

<HEAD> 

<TITLE>L1nus Pauling. Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-*’text/css"> 

< 1 -- 

BODY (margin-left: lln; margin-right: l.Bin) 

.opener (font-size: 2U pt; font-weight: extra light; 
font-style: Italic; line-height: 22pt; font-family: 
Times New Roman; margin-left: lin; margin-right: 
.Bin) 

.normal (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 16pt; font- 
family: Times New Roman) 

.references (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left; 1.2in; 
margin-right: .81n) 

B (font-weight: extra bold; font-style: normal; 
font-size: 14 pt; line-height: 16pt; font-family: 
Arlall 

HI I font-weight : extra light; font-style: Italic; 
font-size: 20 pt; line-height: 22pt; font-family: 
Times New Roman) 
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Tip: The TrueType fonts available on 
Microsoft's site have enlarged character 
sets due to multi-language support. The 
character sets contain 652 characters 
covering Western, Central, and Eastern 
European writing systems. 



H2 (font-weight: extra bold; font-style: normal; 
font-size: 24 pt; line-height: 26pt; font-family: 
Times New Roman) 

H3 (font-weight: extra bold: font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

H4 (font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

--> 

</STYLE> 

i. Add a background color to the document. 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-”text/css”> 

< 1 -- 

BODY (margin-left: lin; margin-right: 1.5in) 

.opener (font-size: 20 pt; font-weight: extra light; 
font-style: italic; line-height: 22pt; font-family: 
Times New Roman; margin-left: lin; margin-right: 
.Bin) 

.normal (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 16pt; 
font-family: Times New Roman) 

.references (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left: 1.2in; 
margin-right: .Bin) 

B (font-weight: extra bold; font-style: normal; 
font-size: 14 pt; line-height: 16pt; font-family: 

Ari al ) 
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Tip: The Times New Roman ami 
Courier New fonts Microsoft is supply- 
ing for Macintosh computers have dif- 
ferent character outlines and metrics 
than Apple *s TrueType versions. 
Micmsoft *s versions offer cross- 
platform compatibility. 



HI {font-weight: extra light; font-style: italic; 
font-size: 20 pt; line-height; 22pt; font-family: 
Times New Roman) 

H2 (font-weight: extra bold; font-style: normal; 
font-size: 24 pt; line-height: 26pt; font-family: 
Times New Roman) 

H3 (font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

H4 (font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

--> 

</SYYLE> 

<B0DY BGC0L0R-”#ffffff’> 

j. Add text, an image, and HTML tags. (Note: The text 
shown in this section is for demonstration purposes 
only. Readers may find Peter Chowka *s full intendew 
in an HTML file on the CD-ROM at the hack of this 
book.) 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling. Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-"text/css*’> 

<!-- 

BODY (margin-left: lin; margin-right: 1.5in) 

.opener (font-size: 20 pt; font-weight: extra light; 
font-style: italic; line-height: 22pt; font-family: 
Times New Roman; margin-left: lin; margi n- ri ght : 

.Bin) 

.normal (font-weight: extra light; font-style; 
normal; font-size: 14 pt; line-height: 16pt; 
font-family: Times New Roman) 
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Tip: The free TrueType fonts available 
from Microsoft 's Web site may be freely 
distributed. However, a Web font regis- 
tration form is required and may be 
found on the site. Designers may not 
supply the font outlines in a form that 
adds value to a commercial CD-ROM 
disk, a disk-based multimedia pro- 
gram, an application program, ora 
utility program. 



.references {font-weight: extra light; font-style; 
normal; font-size: 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left: 1.2in; 
margin-right: .8in) 

B [font-weight: extra bold; font-style: normal; 
font-size: 14 pt; line-height: 16pt; font-family: 
Arial) 

HI (font-weight: extra light; font-style: italic; 
font-size: 20 pt; line-height: 22pt; font-family; 
Times New Roman] 

H2 (font-weight: extra bold: font-style: normal; 
font-size: 24 pt; line-height: 26pt; font-family: 
Times New Roman) 

H3 (font-weight: extra bold; font-style: normal: 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

H4 (font-weight: extra bold; font-style: normal: 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

--> 

</STYLE> 

<B0DY BGC0L0R-’V/ffffff’*> 

<H1> 

Dialogue with the Experts 
</Hl><BRXBR> 

<H2>Linus Pauling. Ph.D.: 

The Last Interview 
</H2> 

<BR> 

by <A HREF-”http: //members .aol .com/realmedia">Peter 
Barry Chowka</AXBR> 

©1996 by peter barry chowka . all rights 
reserved. <BRXBRXBRXDIV CLASS-0PENER> 

<IMG SRC-"Paul ing_2a.jpg” ALIGN-LEFTXIMG SRC 
-"cap5.gif" STYLE- "background: white">n 1979, when 
the respected British journal <I>New Scientist 
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Tip: If you have problems download- 
ing the TrueType fonts from Microsoft's 
Web site, tty ftp://ftp.microsoft.com/ 
developr/drg/tnietype. 



</I>included Linus Pauling, Ph.D., on its list of the 
twenty most important scientists of all time, it was 
for Pauling another in a long series of achievements 
that included an unprecedented pair of unshared Nobel 
Prizes and some startlingly original contributions 
in biology, chemistry and physics. </DIV><BR><BRXDIV 
CLASS-NORMAL) 

By the time of his death in August 1994 at age 93, 
Pauling was probably better known for his more recent 
work on nutritional science and vitamin C. In best- 
selling books on vitamin C, the common cold and can- 
cer, frequent talk show appearances, and numerous 
published papers and scientific presentations about 
a nutritional healing specialty he named "orthomole- 
cular medicine," Pauling was an unparalleled, 
uniquely credentialed spokesman for the emerging 
science of diet and health. 

<BRXBR> 

According to Pauling, his high-profile involvement 
in unpopular political controversies of the 1950s and 
'60s (including organizing the successful interna- 
tional campaign to ban nuclear bomb testing, for 
which he was awarded the 1962 Nobel Peace Prize) pre- 
pared him for the equally rancorous debates of the 
1970s and '80s when he became the de facto leader of 
nutritional medicine at a time when mainstream medi- 
cine denigrated such interests. During the last two 
decades of his life, Pauling's focus on the scientif- 
ic basis of nutrition and his unstinting advocacy of 
megavitamin supplements regularly made him the cen- 
ter of controversy. 

<BRXBR> 

Even after his death, the controversies continued. 
Journalist Lee Dembart, reviewing two new biogra- 
phies of Pauling, calls the scientist an "embarrass- 
ment" and an "eccentric crank" for his interest in 
vitamin C. 
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technology represents a merging of Type 



Tip: Adobe and Microsoft's OpenType 



k. Add a superscript tag. {Note: Peter s style block con^ 
tai fling style definitions has not been repeated here.) 



I and TrueType font technologies that 
offers Web designers a cross-platform 
font standard. 



<H1> 



Dialogue with the Experts 



</Hl><BRXBR> 

<H2>Linus Pauling, Ph.D.: The Last Interview 
</H2> 

<BR> 

by <A HREF-”http://members.aol .com/realmedia">Peter 
Barry Chowka</AXBR> 

<SUP>&#!69 :</SUP>1996 by peter barry chowka. all 
rights reserved . <BR> <BRXBR> 

<DIV CLASS-OPENER> 

<IMG SRC-"Paul ing_2a.jpg" ALIGN-LEFTXIMG SRC 
-"caps. gif'* STYLE- "background: white">n 1979, when 
the respected British journal <I>New Scientist 
</I>included Linus Pauling. Ph.D., on its list of the 
twenty most important scientists of all time, it was 
for Pauling another in a long series of achievements 
that included an unprecedented pair of unshared Nobel 
Prizes and some startlingly original contributions 
in biology, chemistry and physics . </DIVXBRXBR> 

<DIV CLASS-NORMAL> 

By the time of his death in August 1994 at age 93. 
Pauling was probably better known for his more recent 
work on nutritional science and vitamin C. In best- 
selling books on vitamin C, the common cold and can- 
cer, frequent talk show appearances, and numerous 
published papers and scientific presentations about 
a nutritional healing specialty he named "orthomole- 
cular medicine," Pauling was an unparalleled, 
uniquely credentialed spokesman for the emerging 
science of diet and health. 

<BRXBR> 

According to Pauling, his high-profile involvement 
in unpopular political controversies of the 1950s and 
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'60s (including organizing the successful interna- 
tional campaign to ban nuclear bomb testing, for 
which he was awarded the 1962 Nobel Peace Prize) pre- 
pared him for the equally rancorous debates of the 
1970s and ’80s when he became the de facto leader of 
nutritional medicine at a time when mainstream medi- 
cine denigrated such interests. During the last two 
decades of his life, Pauling’s focus on the scientif- 
ic basis of nutrition and his unstinting advocacy of 
megavitamin supplements regularly made him the cen- 
ter of controversy. 

<BRXBR> 

Even after his death, the controversies continued. 
Journalist Lee Dembart, reviewing two new biogra- 
phies of Pauling, calls the scientist an ’’embarrass- 
ment” and an ’’eccentric crank” for his interest in 
vitamin C.<SUP>K/SUP> 

I. Add the ending tags. 

</B0DY> 

</HTML> 

m. Save the file. Save the document in SimpleText or 
your word processor. If you’re using a word processor, 
save the text as Text Only. Give the file an .HTM 
extension. 

n. Test the style sheet document. Open Netscape or 
Microsoft’s Internet Explorer browser. Open your 
document by selecting Open File from the File pull- 
down menu. 

8. Style change: Override a style. 

In the opener text, the type style of the British journal New 
Scientist should be normal text to emphasize that it is a 
publication. This can be accomplished with an inline tag 
that will override the embedded style. 
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Linus Puuling, Ph.D.: The Lnst IiUcrvIcw 



Jl.*; /P75. ^^hen tha respected 
Srtttsk joumcd /A’m* ikterjist 
included Linus Fauiinn. FLEX, on Us 
^ list of the tmfity most irtponoKt 
scientists cfall time. :t nujj&r 
Fauhni anotker in a Icn^ senes of 
; ochicuements thet included sn 
unprecedented pur of unshared 
Ihbsl Fnzes and seme startlingly 
ongirial contritmtic.ns in tndogy. chemistry arsl physics. 




Above: Because the opener text is italic\ 
the New Scientist should be formatted 
in a Roman or Normal style, emphasiz- 
ifig that it is the name of a publication. 



Linus Paulinti. Ph.D.: The Last Interview 



!.»: 197S>. \vhen the respected British 
New Seiemni included Linus 
Fouling, PK.D., on its list of the 
tiwrdy most important scientisrsoj 
. all time, it was far Fouling oncthsr 
in a long senes of achievements that 
, included a'l urprecederitcd pair ci 
urtshorod hhbel Prices and some 
startlingly original ccntniHiticnsin 
biology, chemistry and physics 




Above: The only inline tag that worked 
to transform the type style of the words 
New Scientist at this time vvr/.s' <B 
STYLE= 'font-style: normal”>. 



a. Locate the words New Scientist in the opener text. 
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<H1> 

Dialogue with the Experts 
</HlXBR><BR> 

<H2>Linus Pauling. Ph.D.: The Last Interview 
</H2> 

<BR> 

by <A HREF-"http://members.aol .com/realmedia”>Peter 
Barry Chowka</AXBR> 

<SUP>&//169;</SUP>1996 by peter barry chowka. all 
rights reserved. <BR> <BRXBR> 

<DIV CLASS-OPENER> 

<IMG SRC-”Paul ing_2a.jpg" ALIGN-LEFTXIMG SRC 
-*'cap5.gi f” STYLE- "background: white">n 1979, when 
the respected British journal New Scientist included 
Linus Pauling. Ph.D., on its list of the twenty most 
important scientists of all time, it was for Pauling 
another in a long series of achievements that includ- 
ed an unprecedented pair of unshared Nobel Prizes and 
some startlingly original contributions in biology, 
chemistry and physics . </DIV> 

b. Add an inline tag. 

<H1> 

Dialogue with the Experts 
</HlXBRXBR> 

<H2>Linus Pauling. Ph.D.: The Last Interview 
</H2> 

<BR> 

by <A HREF-"http: //members . aol .com/realmedia">Peter 
Barry Chowka</AXBR> 

<SUP>©</SUP>1996 by peter barry chowka. all 
rights reserved . <BR> <BRXBR> 
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Tip: For details concerning Microsoft's 
free TrueType offer, see Microsoft’s plan 
to add fonts to the Web: Free TrueType 
now and Web page font embedding in 
the future in this chapter. 



<DIV CLASS-OPENER> 

<IMG SRC-"Pauling_2a.jpg" ALIGN-LEFTXIMG SRC 
-"cap5.gif" STYLE- "background: white">n 1979, when 
the respected British journal <B STYLE-‘*font-style; 
normal">New Scienti st</B>incl uded Linus Pauling. 
Ph.D., on its list of the twenty most important sci- 
entists of all time, it was for Pauling another in a 
long series of achievements that included an unprece- 
dented pair of unshared Nobel Prizes and some star- 
tlingly original contributions in biology, chemistry 
and physics. </DIV> 



9. Style change: A font change in a headline. 

Changes in the style definitions inside your style block are 
easy to make. In this example, try changing Times New 
Roman to a sans serif face in the <H2> lag. Start by locat- 
ing the <H2> lag in the style block. 

a. Locate the tag and style definition you’d like to 
change in the style block. 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-"text/css"> 

<!-- 

BODY (margin-left: lin; margin-right: l.Bin) 

.opener (font-size: 20 pt; font-weight: extra light; 
font-style: Italic; line-height: 22pt; font-family: 
Times New Roman: margin-left: lin; margin-right: 

.81 nj 

.normal (font-weight: extra light; font-style: 
normal; font-size: 14 pt : line-height: 16pt; font- 
family: Times New Romani 
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Tip: Microsoft's OpenType initiative 
will include Adobe *s CFC compression 
technology and Microsoft \s AGFA com- 
pression schemes, allowing for faster 
font downloading to Web pages. 



.references {font-weight : extra light; font-style: 
normal: font-size; 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left: 1.2in; 
margin-right: .8in) 

B (font-weight: extra bold; font-style: normal; 
font-size; 14 pt; line-height: 16pt; font-family: 
Arial } 

HI (font-weight: extra light: font-style: italic; 
font-size: 20 pt; line-height: 22pt; font-family: 
Times New Roman} 

H2 (font-weight: extra bold; font-style: normal: 
font-size: 24 pt; line-height: 26pt; font-family: 
Verdana .Arial .Helvetica) 

H3 (font-weight: extra bold: font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

H4 (font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

--> 

</STYLE> 

b. Make a change in a style definition. Add sans serif 
font alternatives to the <H2> tag. For example, add the 
words Arial, Helvetica, and sans serif Helvetica or 
some other sans serif face will be added if Arial is not 
available on the end-user’s system. 

<HTHL> 

<HEAD> 

<TITLE>Linus Pauling. Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<STYLE TYPE-"text/css”> 

<!-- 
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BODY {margin-left: lln; margin-right: 1.5in] 

.opener {font-size: 20 pt; font-weight: extra light; 
font-style: Italic; line-height: 22pt; font-family: 
Times New Roman; margin-left: lln; margin-right: 
.Bin) 

.normal (font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 16pt; font- 
family: Times New Roman) 

.references {font-weight: extra light; font-style: 
normal; font-size: 14 pt; line-height: 15pt; 
font-family: Times New Roman; margin-left: 1.2in; 
margin-right: .Bin) 

B {font-weight: extra bold; font-style: normal; 
font-size: 14 pt; line-height: 16pt; font-family: 
Arial ) 

HI {font-weight: extra light; font-style: italic; 
font-size: 20 pt; line-height: 22pt; font-family: 
Times New Roman) 

H2 {font-weight: extra bold; font-style: normal; 
font-size: 24 pt; line-height: 26pt; font-family: 
Verdana, Arial .Helvetica) 

H3 {font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

H4 {font-weight: extra bold; font-style: normal; 
font-size: 12 pt; line-height: 14pt; font-family: 
Times New Roman) 

--> 



</STYLE> 



Formatting text 
in columns with 
Netscape’s new 
<MULTICOL> tag 

Summary: Use Netscape *s new 
<MULTICOL> tag to format large 
amounts of text into multiple column 
format. 
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N etscape’s new <MULTfCOL> tag adds newspaper-like 
columns to a Web page, which is a practical method of 
fomiatting very long articles. In this example, Peter 
Chowka's Linus Pauling interview fills tliree columns, as 
defined by the tag’s COLS attribute. 

1. Add <MULTICOL> after <BODY>. 

Decide how many columns you need, and add a column 
number to the lag in the form of an attribute. 

Example: 

<MULTIC0L C0LS-3> 



a. Insert the <MULTICOL> tag. 

<HTML> 

<HEAD> 



<TITLE>Linus Pauling. Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 
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Above: Peter Chowka 's Linus Pauling 
interview. Notice that the opening initial 
cap causes leading difficulties in the 
second column. 



<BODY BGCOLOR-”//ffffff*> 

<MULTICOL C0LS-3> 

b. Add two line breaks after the image. Linus Pauling’s 
image now needs two line breaks inserted after the 
image tags and the ALIGN=LEFT attribute deleted. 
Recall that the image aligned on the left side of the 
text in the style sheet example. 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<B0DY BGC0L0R-"//ffffff"> 

<MULTIC0L C0LS-3> 

<H1> 

Dialogue with the Experts 
</Hl><BRXBR> 

<H2>Linus Pauling. Ph.D.: 

The Last Interview 
</H2> 

<BR> 

by <A HREF-"http: //members. aol .com/ real media'*>Peter 
Barry Chowka</AXBR> 

©1996 by peter barry chowka. all rights 
reserved.<BRXBRXBR> 

<IMG SRC-'*Paul ing_2a . jpg”> 

<BRXBR> 
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c. Add a closing <MULTICOL> tag, 




Above: The <MULTICOL> tag 
makes all columns the same width 
unless you set the overall width with the 
WIDTH attribute. Use a pixel value ora 
petventage. In this example, the WIDTH 
attribute is set to 300 pixels: 
<MULTICOL COLS^S WIDTH^300> 



</MULTIC0L> 

d. Add the ending tags. 

</B0DY> 

</HTML> 

e. Save the file. Save the document in SimpleTexl or 
your word processor. If you’re using a word processor, 
save the text as Text Only. Give the file an .HTM 
extension. 

f. Test the three-column document. Launch Netscape, 
and open your document by selecting Open File Irom 
the File pull-down menu. 




Above: In this example, the WIDTH 
attribute is set to 85%: 

<MULTICOL COLS=3 WIDTH=85%> 
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Controlling font 
color and family 
with the <FONT> 
tag (Netscape 
Navigator or 
internet Expiorer) 



Summary: Use the <FONT> tag 's 
new attributes to control type color 
and type family. 




T he <FONT> tags recent COLOR and FACE attributes 
may be used to control typography on your Web 
pages. In the Linus Pauling interview, the tag and its attrib- 
utes may be used to alter the font color and family in the 
article's headlines. {Note: The <FONT> tag and attributes 
may be applied to any part of a line. ) 

1. Alter the headline color. 

To change the color of the headline Dialogue with the 
Experts, an RGB hexadecimal triplet is needed for the 
<FONTCOLOR=> tag. 

The Linus Pauling image is a Photoshop duotone that adds 
a violet shade to what was originally a black and white 
scan. The Photoshop eyedropper revealed that the shade 
eorresponds to Pantone 667 CV, which the Best Business 
Solution Online Color editor translates into a hexadecimal 
triplet value of #584886 using the R=88, G=72, and 
B= 1 34 data taken from Photoshop. ( Note: See Convert a 
Pantone RGB value to a Web page color with the BBS 
Color Editor in the Online Tools chapter.) 

<HTML> 

<HEAD> 

<TITLE>L1nus Pauling. Ph.D.: The Last Interview by 
Peter Barry Chowka 
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Tip: For RGB hexadecimal triplet val- 
ues for your <FONT COLOR-> ta^, 
visit Best Business Solution \s Online 
Color Editor at http://w\v\\\hhsinc 
.com. 



</TITLE> 

</HEAD> 

<BODY BGC0L0R-’7/ffffff”> 

<H1XF0NT C0L0R-'7/584886”> 

Dialogue with the Experts 
</FONT></Hl><BRXBR> 

<H2>Linus Pauling. Ph.D.; 

The Last Interview 
</H2> 

<BR> 

by <A HREF-'*http://members.aol .com/realmedia''>Peter 
Barry Chowka</AXBR> 

&//169;1996 by peter barry chowka. all rights 
reserved .<BRXBRXBR> 

2. Alter the headline face. 

<HTML> 

<HEAD> 

<TITLE>Linus Pauling, Ph.D.: The Last Interview by 

Peter Barry Chowka 

</TITLE> 

</HEAD> 

<B0DY BGC0L0R-’7/ffffff”> 

<H1XF0NT FACE-’*VERDANA.ARIAL, HELVETICA SIZE-”5” 
C0L0R“/^584886”> 

Dialogue with the Experts 
</FONTX/HlXBRXBR> 

<H2>Linus Pauling. Ph.D.: 

The Last Interview 
</H2> 

<BR> 

by <A HREF-''http://members.aol .com/realmedia">Peter 
Barry Chowka</AXBR> 
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Microsoft’s 
plan to add fonts 
to the Web: 

Free TrueType 
now and Web page 
font embedding in 
the future 



Summary: The Microsoft/ Adobe font 
technology merger represents a 
uni(/ue contribution to Web-based 
typography. 




webfonts.sit.1 

A re you sick of designing with Times Roman? 

Typographic enhancements to HTML are on the way. 
To solve the Web’s font problems, Microsoft has developed 
a new font file format with Adobe Systems. 

1. Solution requires downloading (for now). 

Although Microsoft and Adobe have developed a publicly 
available font specification that promises to improve the 
quality of type on the Web, their solution requires develop- 
ers and end-users to have screen fonts installed in their com- 
puters. Microsoft is distributing free fonts from their Web 
site. These include the fonts currently supplied with 
Windows 95 (Times New Roman, Courier New, and Arial) 
and a set of fonts currently supplied with the Windows ver- 
sion of Internet Explorer 3.0 (Arial Black, Impact, Comic 
Sans MS, and Verdana). Other fonts available on the site 
include Trebuchet and Georgia. 

The OpenType format supports both Type 1 and TmeTVpe 
fonts, and the format is backwardly compatible with all 
existing TrueT^'pe and Postscript fonts. 

2. Designing with fonts. 

Although there is a TrueType rasterizer built into Windows 
95, Windows NT, and the Macintosh, for now, .screen fonts 
must be installed in an individual users computer in order 
for the fonts to be displayed. Macintosh and Windows Web 
designers interested in using fonts need to distribute any 
fonts they use for Web viewers to download. Microsoft’s 
free TrueType fonts have been designed for this purf^ose 
and font downloads are provided on the Microsoft site for 
both platforms. 

Using fonts already bundled with Windows 95 and the 
Windows version of Internet Explorer version 3.0 increa.ses 
the likelihood that the fonts will be displayed bccau.se the 
fonts are already installed. 
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Above: In this example, the headline 
Dialogue with the Experts was 
fonnatted with : 

<F0NT FACE-”VERDONA.ARIAL. HELVETICA" 
SIZE-"5”>Dialogue with the 
Experts</FONT> 



Web page developers on both platforms may use font alter- 
natives in the <FONT> tag. Netscape’s Navigator and the 
Internet Explorer browser will search through the fonts 
available on an end-user’s system and load what is available. 
If none of the fonts are available, the browser loads the 
default typeface. {Note: The <FONT> ta^ recptires an end- 
ing </FONT> tag.) 

Example: 

<F0NT FACE-”VERDONA.ARIAL. HELVETICA” SIZE-"4”> 

3. Embedded fonts (the future). 

Microsoft is currently developing an embedded font tech- 
nology that will free Web viewers from needing to install 
fonts on their computer. Font information will travel with 
a document. Microsoft and Adobe have plans to submit a 
proposal for font embedding (using OpenType) to the 
World Wide Web Consortium. If the proposal is endorsed 
by W3C, the initiative will become a standard method to 
use fonts on the Web. Even if the proposal is not endorsed 
by W3C, Microsoft plans to add this font compression 
technology to the Internet Explorer browser. 
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Chapter 



Online Tools 



This chapter introduces valuable resources for the Web artist 
who uses the Web as a current and convenient source of infor- 
mation. The chapter begins with a color editor tool from a 
company in Houston called Best Business Solutions (BBS). 
Web artists who need hexadecimal codes for their HTML tags 
to color a background or text can use this editor in conjunc- 
tion with Photoshop as a translation tool. 

ALSO covered in this chapter are search engines, which have 
become popular online tools for finding information on the 
Web. Yahoo! search, originally created by David Filo and 
Jerry Yang from Stanford University, not only provides an 
easy-to-use search engine but it facilitates a way to extend the 
search to other search engines. To promote your site, you’ll 
want to submit information about your pages to all of the 
search engines, and this chapter shows you how to begin the 
submission proce.ss at Yahoo!. 



Convert a 
Pantone RGB 
value to a Web 
page color code 
with the BBS 
Color Editor 



Summary: Visit Best Business 
Solutions ' Web page, enter the RGB 
value of a desired Pan tone shade 
(gathered from Photoshop), and watch 
the BBS Color Editor display the color 
and generate the required HTML code 
for your Web page. 





Adobe Photoshop**^ 




rths i l - ■ . 



B est Business Solutions’ Web page is an essential tool 
for graphic designers who want to add color to a Web 
page. You can access the tool, called the BBS Color Editor, 
at http://www.bbsinc.com/bbs-cgi-bin/colorEditor.cgi. 

Adding color to a Netscape background or text requires 
placing a hexadecimal red-green-blue triplet in an HTML 
document tag. For example, to color a background white, the 
tag would appeal* like this: 

<BODY BGCOLOR-”//ffffff’> 

The BBS Color Editor has an extensive list of color names 
that were created by BBS. When I wTote and asked them if 
RGB color information (Photoshop, 0-255) could be trans- 
lated into the HTML hexadecimal triplets needed for the 
HTML lags, they wTOle back and said they had added an 
RGB field to their Color Editor! Graphic designers can 
obtain an RGB value for any shade they use in Photoshop 



Online Tools I 129. 






c«lor Fwi[>f : 



w 


\ 


■ 

oj-itln |- 
05:[T~1 x 
Q t;[o~lx 






O"ifo~] 

O0:fF~| 




■ 


O«:fo~~| 



[ CanctI I 



l:[^ 

•-• 1° I 

>: |0 1 




Vr 'st | t 
Ki :ioo; x 



lb. 



Custom Colors 



Onok: PflNTONE Coflted 



PA>.T(y< 39i3 CV 



PAHTOrX 3»43 CV 
PAhT0rrt395SCV 
PAHTWt CV 
PAHTOOt 5973 CV 




PAfnCXC 5995 CV 






H 



Key ff\ 3935 

CI%C 
11% M 
69% V 
0 % K 



Id. 
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(Pantone, Toyo, Tnimatch), type the RGB values into tlie Color 
Editor^ and the Editor displays the desired shade on screen and 
generates the hex code for an HTML document, as shown in the 
following table. 

The Pantone shades used in this example are: 



Item 


Pantonc # 


RGB Value 


Hex Code 


Background 


3935CV 


R=255 


#fff854 






G=248 








B=84 




Text 


302 


R=0 


#003850 






G=56 








B=80 




Linked text 


1685CV 


R=114 


#722916 






G=41 








B=22 




Visited link text 


172CV 


R=246 


#f62500 






G=37 








B=() 




Active link text 


355 


R=0 


#008c3c 



G=140 

B=60 



1. Find desired shade(s) in Photoshop. 

Decide which Pantone you’d like to use for the background, 
text, link text, visited link text, and active link text. Locate 
the RGB values of these shades: 

a. Click on the Foreground color swatch in the Toolbox. 

b. Click on Custom. 

c. Click on llie pop-up box in tlie 
Custom Color dialog box to 
select a color model. 

d. Scroll to select a shade. 

e. Click on Picker. 



nNPfl Color 
Die Color Guide 
FOCOLTONE 



✓ PflNTONE Coated f 



PflNTONE Process ^ 
PflNTONE ProSim 
PflNTONE Uncoated 
TOVO Color Finder 
TflUMflTCH 

Ic. 
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OR: 1 255 
QG:|2^8 
OB:[iT 

2 . 



(•) Background Color: Default 


3a. 




□ Input RGB x^alue (0-2SS) 




3b. 




R:| |G:| |B:| | 





3c. 




3dl. 




niiy inforinutlon you ^ubmM Is 
InsGcuro tirid could be otiserucd tiy a 
third parly luhlle In transit. 



If you ore siibmittlny possuiords, 
credit cord numbers, ui other 
Infurmatlon you mould like to keep 
prluate. It lunuld be safer for you to 
cancel the submission. 



[Don’t Shorn Hgoln) 



[ Cancel ) ( OK ) 



3d2. 



This is the HTML code of your robr selection: 
<body bcjcolor=''#fff854"> 

3e. 



® Text: 

4a. 



This is thr HTML code of your color selection: 

<body bgcolor«**#fff854" t«xt«"#003850" 

4a. 



® Link text : 
5a. 



2. Record the RGB value of your color(s). 

The Color Picker dialog box will display RGB values of the 

color you choose. Record this information. 

3. Find the hex code for background color. 

a. On the BBS Color Editor Web page, make sure the radio 
button next to Background Color is selected. 

b. Click to enter an “X” in the Input RGB value field. 

c. Enter the RGB values you recorded from Photoshop. 

d. Click on the Test It Now button (Note: The BBS Color 
Editor is interactive, so you 'll see a warning dialog box 
concerning security. Click on Don 7 Show Again.) 

e. The BBS Color Editor will change the background to 
your desired color, and the hexadecimal HTML code 
will be displayed at the top of the Editor (in this example, 
body bgcolor=“#fff854”). 

4. Find the hex code for text. 

a. On the BBS Color Editor Web page, make sure the radio 
button next to Text is selected. 

b. Click to enter an “X” in the Input RGB value field. 

c. Enter the RGB values you recorded from Photoshop. 

d. Click on the Test It Now button. 

o. The BBS Color Editor will change the text to your 
desired color, and the hexadecimal HTML code will be 
displayed at the top of the Editor (in this example, 
TEXT=“#003850’’). 

5. Find the hex code for link text. 

(Note: Link text refers to highlighted hypertext that is 

activated with a mouse click.) 

a. On the BBS Color Editor Web page, make sure the radio 
button next to Link Text is selected. 

b- Click to enter an “X” in the Input RGB value field. 

c- Enter the RGB values you recorded from Photoshop. 

d. Click on the Test It Now button. 
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e. The BBS Color Editor will change the text to your 
desired color, and the hexadecimal HTML code will be 
displayed at the top of the Editor (in this example, 

LINK="#722916”). 



(i) Visited luikte3d: Defctiih 



6a. 



This is the HTML code of your cobr selection: 

<body bgcolors" #fff 854- texts"#003850" lii\ks-#722916"> 

1 1 

5e. 

6. Find the hex code for visited link text. 

(Note: Visited link text refers to a link that has already been 
followed.) 

a. On the BBS Color Editor Web page, make sure the radio 
button next to Visited Link Text is selected. 

b. Click to enter an “X’’ in the Input RGB value field. 

c. Enter the RGB values you recorded from Photoshop. 

d. Click on the Test It Now button. 

e. The BBS Color Editor will change the text to your 
desired color, and the hexadecimal HTML code will be 
displayed at the top of the Editor (in this example, 
VLlNK=“#f62500’’). 



(•) Acttvfilmkteid: Dej<aA 

7a. 



This is the HTML code of your color selection: 

<bcdy bgcolor="#fff854" text«"#003850" link=*'#722916” 
vLmk="#f62500" alink=“#008c3c“> 

6e. 

7. Find the hex code for active link text. 

(Note: Active link text refers to a link that's currently active 

ora link with a mouse button held down.) 

a. On the BBS Color Editor Web page, make sure the radio 
button next to Active Link Text is selected. 

b. Click to enter an “X” in the Input RGB value field. 

c- Enter the RGB values you recorded from Photoshop. 

d. Click on the Test It Now button. 

e. The BBS Color Editor will change the text to your 
desired color, and the hexadecimal HTML code will be 
displayed at the top of the Editor (in this example, 
ALINK=“#008c3c’’). 
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SimpleText 



8. Try creating a new HTML document using 
color tags. 

To lest your color tags, create an HTML document on your 
hard drive, and open it in Netscape. 

a. Open SimpleText. 

b. Create a new document. 

c. Begin a new document with the following markup tags 
<HTML> 

<HEAD> 

<TITLE>New Col ors</TITLE> 

</HEAD> 

9. Add the color tags. 

<HTML> 

<HEAD> 

<TITLE>New Col ors</TITLE> 

</HEA0> 

<B0DY BGC0L0R-”#fff854" TEXT-’V/003850'’ 

LINK-*7/722916” VLINK-'*//f 62500” ALINr-//008c3c”> 
</B0DY> 

10. Test a background picture. 

The Color Editor can test any picture available on any server 
as a backgi ound image. All you need is the correct URL 
(Uniform Resource Locator). If the image is smaller than the 
Netscape window, Netscape will tile, or repeat, the image to 
form a wallpaper effect. 

Netscape’s sender has background samples (Figure lOa) avail- 
able to you for download (http://home.netscape.com/assisl 
/net_siles/bg/backgrounds.html). The Color Editor can dis- 
play a swatch as a test background. 

a. Go to Netscape’s Background Samples page at 
http://home.netscape.com/ assist/net_sites/bg/back- 
grounds.html. 

b. Record the file names of any samples you’d like to test. 
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10c. 

Tip: To replace a file name in the URL 
fteUi click in the text and use the right 
arrow key to move the cursor all the 
way to the right. Press the Delete key 
until the file name is deleted then re- 
type another name. 




lOa. 

C- Click on Yes in the Use Background Picture field on the 
Color Editor page. 

d. Enter: 

http://home.netscape.com/ass1st/net_s1tes/bg/fabr1c/ 
yenow_fabr1c.g1 f 

e. Try a few of your selections by substituting another file 
name in place of fabric/yel low_fabric.gif. 

11. Create a new HTML document. 

To test your background picture, create an HTML document 
on your hard drive, and open it in Netscape. 

a. Open SimpleText. 

b. Create a new document. 



c. Add tlie following markup tags: 

<HTML> 

<HEAD> 



<TITLE>Background P1cture</TITLE> 
</HEAD> 



12. Add the BODY tag. 

{Note: Step 12 requires that your PPP connection be open; 
however, you can test step 14 on your hard drive.) 

<HTHL> 

<HEAD> 

<TITLE>New Colors</TITLE> 

</HEAD> 

<B0DY BACKGROUND-”http: //home. netscape 

.com/ass1st/net_s1tes/bg/fabr1c/yenow_fabr1c.g1f”> 

</B0DY> 
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Tip: Try using the URL for a Netscape 
background sample in the <IMG> tag. 
Instead of tiling the swatch as a back- 
ground, only one swatch will appear on 
the page. 




13. Copy a background sample (optional). 

Copy a sample to your hard drive, and use Ihe file name in 
your<BODY> tag. 

a. Go to Netscape’s Background Samples page at 
http://home.netscape.com/ assist/nel_sites/bg 
/backgrounds. html. 

b. Press and hold down the mouse pointer on a sample. 

c. Select Save This Image As. 

d. Use the default name, or type in a file name. 

e. Click on Save. 

14. Create a new <BODY> tag (optional). 

(Note: the file name you create for your tag may vaty depending 
on where the image is located. This e.xample assumes the file 
yellow_ fabric.gif is is in the same directory as the HTML 
document. The file name together with one or more directory 
names is referred to as the path . ) 

<HTML> 

<HEAD> 

<TITLE>New Col ors</TITLE> 

</HEAD> 

<BODY BACKGR0UND-"ye1 1 ow_f abri c . gi f *> 

</BODY> 
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15. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<BODY>...</BODY> 

A tag used to open and close the body of a document. 

This tag uses the following attributes: 

BACKGROUND specifies a URL to point to a background 
image that will tile to the full document image area. For 
example: 

<B0DY BACKGROUND-'’yel 1 ow_f abri c . gi f '> 

BGCOLOR controls the color of the background. For 
example: 

<B0DY BGCOLOR-”y/fff854”> 

TEXT controls the color of normal text. For example: 

<B0DY TEXT-'V^003850”> 

LINK controls the color of link text. For example: 

<B0DY LINK-"/^722916’*> 

VLINK controls the color of visited link text. 

<B0DY VLINK-'W2500”> 

ALINK controls the color of active link text. 

<B0DY ALINK-‘V/008c3c"> 

<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<HTML>...c/HTML> 

A tag used to open and close an HTML document. 
<TITLE>...</riTLE> 

Used inside the head, this tag describes the title of a docu- 
ment, which shows up inside a document’s title bar. 
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Searching 
the Web on 
Yahoo! search 

Summary: Looking for links that com- 
pliment your page? Doing research? 
Just browsing the Web? Try using the 
search engine at http://www.yahoo.com. 




I f you’ve never used a search engine, you’ll be amazed al 
the power of this tool, which will search the Web for a 
topic of your choice. There are several such search engines 
or robots on the Web, and Yahoo! (http://www.yahoo.com) 
is one of the most popular. 

Yahoo! was created by David Filo and Jerry Yang, both 
Electrical Engineering students at Stanford University, where 
this tool was housed for the first nine months of operation. 
Yahoo! is now otT-campus. It’s an independent company, and 
the robot runs on three Silicon Graphics Indy machines. For 
speed reasons, complex searches are not allowed. However, 
the engine supports a simple boolean and search, and an 
optional fill-in form allows a visitor to specify a number of 
matches through a popup box on the form. 

1. Select a topic from Yahool’s top-level. 

The simplest w'ay to use Yahoo! is to select from among the 
categories organized on the home page. Each category has 
links that will lead you to related home pages. 
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a. Select one oflhe topics organized into top-level 
categories on the Yahoo! home page. 

b. Click on a link. 
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c. The link will take you to pages ofother links to related 
Web pages. 
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Ic. 



2. Use the Yahoo! search form. 

a. Type in any topic on die Yahoo! home page. 



b. Click on the Search button. 



c. A page of related links will be displayed for you to 
explore. 



© © ^ © © 
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2a, 2b. 




2c. 
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Extending your 
Yahoo! search to 
other search 
engines 

Summary: The Yahoo! search engine 
provides links to other search engines 
at the bottom of the pages that are 
returned. Use these links to extend your 
search without retyping your 
keyword(s). 







04*rfMUcli Zagi»n 

I'lf • taMUMff 'Sii&ata'ttsiA* L*«i < Utim • l«oi • tfHfiiu 



T^flm fan . L>aJ 



Ic. 




T he page that returns the results of your Yahoo! search 
will have a group of links to other search engines at the 
bottom of the page. These links allow you to extend your 
search to one or more of the search engines listed without re- 
typing your search topic. (Note: The search topic you typed 
is referred to as a keyword.) 

1. Steps to extend a search. 

a. Follow the steps in the previous section to conduct a 
search on Yahoo!. 

b. At the conclusion of your search, scroll to the bottom of 
the page that is returned. 

c. Click on a link to another search engine. 

d. A page of related links on the search engine you chose 
will be displayed in your browser window. 
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NetSite assistance 
from Netscape 



Summary: Visit Netscape \s home pa^e 
to download Netscape plug-ins and 
updated reference material on changes 
in HTML 

Tip: If you 're not currently online, it is 
possible to load Netscape on your hard 
drive and compose HTML documents 
locally. Create the HTML documents 
using TeachText, SimpleText, or your 
favorite word processor {he .sure to 
save the document in your word 
processor as Text Only). 



Home 
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Link to download 
Netscape Navigator 
software and plug-ins 




N etscape's Web site (htlp://home. nelscape.com) 
is a valuable resource for downloading a current 
version of Netscape Navigator, plug-ins, and current refer- 
ence materials on HTML. 

1. Locating Navigator software and plug-ins. 

a. Click on the Home button at the top of your Netscape 
browser window to go to the Netscape home page. 

b- Scroll down the page to locate links to current 

Netscape Navigator software downloads and plug-ins. 
(Note: Plug-ins add functionality to the Netscape 
Navigator software. ) 

2. Steps to find Netscape’s Web resources. 

a. Click on the Assistance button in the Netscape splash 
screen at the top of the Netscape home page. 
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2b, 2c, 2d. 

I 



Help for Users 



Help for 



Developers 



b. The Netscape Assistance and Customer Service page 
will appear. 

c. Scroll down the page to view: 

Help for Users 

Help for Developers, Authors and Publishers 

d. In the section labeled Help for Developers, Authors 
and Publishers^ click on links in the How to Begin 
Building Web Sites section. 

e. A Creating Net Sites page will be displayed, which 
includes the following sections: 

Authoring Documents 

Look for the latest reference materials on HTML. For 
example, this section provides A Beginners Guide to 
HTML, Composing Good HTML, Extensions to 
HTML, and Guides to Writing HTML Documents. 

Adding Functionality 

Look for Off the Web, a monthly newsletter and addi- 
tional director}' listings of mailing lists and news- 
groups to assist Web developers. 




2e. 



Link to Creating 
Net Sites page 
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Add information 
about your site to 
Yahoo! and other 
search engines 

Summary: Promote your home page by 
adding your URL to one or more search 
engines. 



B y adding your URL to a search engine, you’re provid- 
ing Web viewers with a way to find your page. 
Information may be added to each search engine individu- 
ally or to several search engines at once by visiting the 
Submit It page at http://www.submit-it.com. (Note: 
Changes to any of the search engine Web pages may affect 
the multiple submission functions on Submit It.) 

1. Steps to add your URL to Yahoo!. 

a. Go to the Yahoo! home page at http://www.yahoo.com. 

b. Use the Yahoo! search function to see if your page is 
already listed. 

c. After you’ve run a search and you know your site is not 
listed, return to the Yahoo! home page at 
http://www.yahoo.com. 




la, lb, Ic. 

d. On the Yiihoo! home page, click on the category where 
you’d like your site to appear. 
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e. A page will be displayed that corresponds to the cate- 
gor>' you selected. 

f- Click on the Add URL icon at the top of the page in the 
Yahoo! banner. 

g- The Add to Yahoo! page will be displayed. 

h. Scroll to the form at the bottom of the page and type 
your page title, your URL, and 20 words that describe 
your site. 

i. Adding the following form information is optional: 

• Geographic location of your site 

• Your name and email address 

j- When you have completed the form, click on the 
Submit button. 



mucmk m i» v«o.ai ; __ — 

£LlJ*mia.l£l.aii£IISI 


11 


liXSTlMf ii.«l.«‘«toat||6lM»IMM II MIWA ll )| 1 





A4d lo 

W 4 IK UJBU 

tl JO. H* fen CM M (viW. MMM MMX ntM MMntv 

>, W « XmCiilUaM 

It M>« vmcM Ota »> irkucx k .. *«UT Ital OUk w yalMI. ftMM «ta CtaKt 
Klik 



yiriv«um\>'T$am M rcTtaT Asr-iiv«Wv'X*y 

. laynMX M«*; 

ao>MMiial iMi ■iMttcM'HaibIMMJtai&.MtnMiruttrr-tctMcaXrCaHaksa' 

rn«x« 4 Ml Carrkx 



o H j«« «. J |Mm » «i ta «>}*»»»■ MMupay «.!»1 ta 6 ii i£ll 

« < « MHuI n |M « ot R>taV«C 

• ■ 1V.W M r£tn«<»ru/>i 

• 

' mtaitucoct .talk «(•*»•€• 

Ku. car t^Mtawc tx wJi t* ^ l>r. 




C>M <S.'M 












i: 

Urn 



C%| .kjaa»ta*tm.M«*WH 
rMu< MWTU t« lyw »«Mm MiM un. ca ta 



/4kut( ntSn-'AJMrXm 



m 



lg,lh, II. 



Pleaae [ Submit ) it.. 

ij. 



k. In the dialog box that follows, click on OK. 



A 



Rny Infurmation you submit is 
insecure and could be obserued by a 
third party while in transit. 



If you are submitting passuiards, 
credit card numbers, or other 
information you uiouid like to keep 
priuate, it wouid be safer for you to 
cancei the submission. 



[Don't Show llgain) 



[ Cancel ] 



II OK a 



Ik. 
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Locating, 
downloading, and 
decompressing 
shareware from 
the Web 



Summary: duet's Shareware.com site 
is an excellent resource for shareware. 



W ondering if your software is outdated? Check cinefs 
Shareware.com site. The archive contains a very 
large collection of freeware and shareware programs that 
you can download. 

1. Steps for locating and downloading 
software. 

a. Go to the Shareware.com site at htlp://www 
.shareware.com. 

b. Click on the Selections link. 

c. A Selections page will be displayed. 




la. 
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The souuS. aor the honest bro'5/sers, vie'w^rs 
and players. 
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d. Click on a Mac or PC icon in a desired category. 

e. A list of software in the category you chose will be 
displayed. 

f. Click on a link to a desired software program. 

g. A page displaying a download link will appear. 

h. Click on a download link to begin downloading. 




le, If. 
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Stuffit Exp.ander'^'' 



2 . 



2. Notes on decompression. 

Software available for downloading will often be encoded 
in a BinHex format with an .HQX file extension. If you 
have Stuffit Expander installed as a Netscape helper appli- 
cation, Netscape will automatically decompress the file at 
the conclusion of the download. 

If you do not have Stuffit Expander installed as a Netscape 
helper application, you will be asked if you want to save 
the file on your hard drive at the conclusion of the file 
download. Save the file, locate Stuffit Expander on the 
CD-ROM in the back of this book, and decompress the file 
manually. 

Stufilt Expander will also expand files that have been 
encoded in MacBinary (.BIN) format. If you have also 
installed DropStuff with Expander Enhancer, you will be 
able to expand files that were compressed or encoded on 
PCs and Unix systems with Stuffit Expander. These 
include: ZIP (.ZIP), ARC (.ARC) archives, gzip (.GZ), 
Unix Compress (.Z), UUencoded (.UU), and Tar (.TAR). 
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Photography 



Images arc the most popular multimedia elements on the Web. 
However, until browser software behaves like Quark XPress, there 
arc many subtle details involved in placing images on a Web page. 
Because of bandwidth limitations — the objective is to keep graphics 
files to a minimum — image manipulation has more in common with 
the computer game industry than it does with print. 

To introduce readers to these new concepts, Mark Elbert’s notes on 
Web graphics summarize details such as Web page size, color scan- 
ning, bit depth, file naming conventions, and advice on testing a Web 
page before it’s launched into cyberspace. 

New media lu iist Jane Greenbaum introduces readers to Painter’s 
Create Drop Shadow command, which provides a quick method of 
creating drop shadows. The command can be used for creating a drop 
shadow around text or an image. {Note: Creating a drop .shadow 
amund type involves vety few .steps.) 

In remaining sections, Mark Elbert’s Web projects will give readers 
clues about how to assemble their own pages, plus a section on creat- 
ing a Super Palette with DeBabclizer, which offers color palette 
manipulation tricks from DeBabelizer’s author and game industry 
expert, David Theurer. 




Mark Elbert’s 
notes on Web 
graphics 



Summary: Mark Elbert relays tips on 
Web page siz.ey color palettes, dithering, 
and file formats. 




G raphic designers can leverage everything they know 
about print and often reuse graphics that have been 
created for print. In this section, Mark Elbert’s notes on 
graphics will help graphic designers make a transition from 
print to Web graphics. 

1. Plan the size of your images. 

Because most microcomputer color monitors are 14-inch 
color screens, you should plan your graphics to fit this aver- 
age-sized window. When Netscape launches, the browser 
window does not fill a 14-inch screen, but the Web visitor 
can resize the window to see wider images. The available 
space in a single Netscape window (resized to fill the .screen) 
on an average monitor is as follows: 



Dimension 


Pixels 
(or pts) 


Picas 


Inches 


Horizontal measure 


604 


50.33 


8.38 


Vertical measure 


304 


25.33 


4.22 



Although Netscape’s default window has an inside horizontal 
dimension of 486 pixels on a Macintosh monitor, images are 
always offset 8 pixels from the edge of the browser window 
by default. As a result, the banner graphic should be no more 
than 604 pixels. (Note: Pixels dots, or screen elements.) 

When planning the height of your graphic, decide whether 
you’d like the average visitor to experience the graphic in 
“pages,” or if you want the graphic to fit within the first 
viewable window. Set a graphic’s height to 304 pixels to 
limit the graphic to one screen. Although Netscape’s default 
window has an inside vertical dimension of 320 pixels, there 
will be an offset of 8 pixels along the top of the brow.ser win- 
dow by default. 
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Tip: Before resampling or changing the 
hit depth in your image, make a duplicate 
of the image. Select Duplicate f mm the 
Image pull-down menu in Photoshop, and 
give the file an alternate name. 




3a. 




3b. 



2. Color scanning: The transition from print. 

The 24- and 30-bit scanners that graphic designers use for 
print provide infomiation for the printed page, far in excess 
of what you’ll need or want for Web graphics. 

The 24-bit image you edit in Photoshop should be reduced to 
a second, smaller image of 8 bits or fewer. Half of your image 
manipulation steps will be to reduce file size because file size 
is critical on a Web page. Look for examples in this chapter 
that demonstrate how to reduce bit depth in Photoshop or 
DeBabelizer. 

a. Scan to a particular size. Most scanning software 
programs allow you to scan to a particular size. Rather 
than resizing the image in Photoshop, it’s best to scan to 
your desired size on the scanner, as resizing in 
Photoshop causes blurriness. 

b. Scan to a larger resolution. In spite of the fact that you 
will ultimately not need more than 72 pixels per inch, 
graphic designers generally agree that the best images 
are those that are oversampled, or scanned at a higher 
resolution and then resampled. 

3. Correct the color of your image. 

Improve the color of an image by redistiibuting the color 
tones. This can be accomplished by setting the white point 
and black point or by manually selecting the lightest and 
darkest iireas in a scanned photo. (Note: See Creating a ban- 
ner graphic or splash screen in this chapter for steps on how 
to set the white point and black point.) 

a. Histogram before color correction. A histogram from 
Photoshop reflects the tonal distibution in an image or 
the brightness and darkness values. Note that the x-axis 
reflects the colors from darkest (left) to brightest (right). 
The y-axis reflects the number of pixels with each value. 

b. Histogram after color correction. After setting the 
white point and black point to color-correct the image, 
the color is more evenly distributed. 
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Tip: Set your monitor to 256 colors when 
you *tv working on images for the Web. 
Most computers on the Web have an 8-bit 
color depth, so this will give you a close 
idea of how your images will look. 

If you have a 24-bit monitor and you *d 
like to .switch to 8-bit colot; select Control 
Panels\Monitors from the Apple pull- 
down menu, and choose 256 colors ( in 
System 7.5x, the Apple pull-down menu 
has a ca.scading pop-up menu that allows 
you to see and select any Coni ml Panel). 



Tip: Figure 5a, 5b, 5c, and 7 are avail- 
able on the CD-ROM in the back of this 
book. Open the photos on a Macintosh 
with a color monitor to see the differ- 
ences in bit depths. 




4. Changing the bit depth. 

By reducing bit depth, you reduce file size. Conversion to a 
smaller bit depth is accomplished through a mode change in 
Photoshop. When converting from RGB Mode to Indexed 
Color Mode, a dialog box will appear and allow you to 
select a bit depth and a dithering option. 

By reducing the bit depth in an image, you also reduce the 
number of colors. When you convert an RGB image to 
Indexed color in Photoshop, the program builds a color table 
or palette for the image. Although an RGB image can contain 
16.7 million colors, an indexed color image contains 256 
colors. Photoshop simulates a larger RGB palette using the 
available 256 colors. (Note: For more information and exam- 
ples, see the secton on bit depth in this chapter. ) 

Photoshop allows you to control the following palette types 
when you convert to Indexed Color Mode: 

• Exact Palette. Photoshop uses the same 256 col- 
ors present in the original RGB image. 

• System Palette. Photoshop uses the system’s default 
color table. Dithering is an option. 

• Adaptive Palette. Photoshop creates a color table of col- 
ors more commonly used in the image. (Note: When 
converting to Indexed Color Mode in Photoshop, the 
Adaptive Palette is the best option.) 

• Custom Palette. Photoshop displays a Color Table dialog 
box, allowing you to edit the color table using the Color 
Picker. The palette can be saved for later use. 

• Previous Palette. Photoshop makes this option available 
when you have already converted an image using the 
Custom or Adaptive Palette option. 

5. Dithering. 

Dithering adjusts the color of adjacent pixels to fool the eye 
into thinking there is a third color present. Greg Marr, a color 
manipulation expert at Equilibrium, recommends selecting 
dithering whenever it is an option. 

a. 24 bits, millions of colors, no dithering. A 24-bit 
image on an 8-bit monitor has some dithering due to 
Color QuickDraw’s intepretation of the color palette. 
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5b. 



b. 4 bits, 16 colors, dithering. Photoshop’s dithering 
applied in a mode change from RGB to Index Color 
Mode camouflages a reduction in the number of colors. 

c. 4 bits, 16 colors, no dithering. Without dithering, there 
are too few colors in a 4-bit image to approximate skin 
coloring. 

6. Add type after reducing the bit depth. 

Don’t subject the type in your image to dithering. Add type 
after you have settled on a bit depth you like. 





7. Color duotone and grayscale options. 

Color duotone and grayscale images look better at smaller 
bit depths than do full color images. For instructions on 
how to create a duotone, see Creating a duotone from a 
grayscale image later in this chapter. 



Image 


Color 


Duotone 


Grayscale 


8 bit, GIF 


160 K 


148 K 


144 K 


8 bit, JPEG 


60 K 


44 K 


52 K 


(med.) 








4bil.GIF 


92 K 


100 K 


80 K 


4 bit, JPEG 


32 K 


15248 K 


52 K 


(mcd.) 









8. File naming conventions. 

Your Web documents should have proper extensions, 
to help the Web server identify the file type. 



Format 


Extension 


HTML 


.html (Unix) .htm (DOS) 


GIF 


•gif 


JPEG 


Jpg Jpeg 
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Tip: Sliotlenin^ a file name to eight char- 
acters can he a challenge for Macintosh 
users. Tty removing the vowels fmm the 
file name. The file name can often he 
cietennined from the remaining conso- 
nants. 



Tip: Bmwsers are constantly evolving like 
other .software pwgrams. Try to stay 
familiar with new developments hy down- 
loading new versions occa.sionally. 
Current infonnation ahout updates to 
HTML can he obtained within Netscape 's 
own .sy.stem ofWeh pages at http.V/www 
.netscape.com. 

Tip: Even though many users now have 
modems that operate at 28.8 Kbps or 
higher, it \s often the case that users 
cannot connect to their Web sites at these 
optimum .speeds. Always as.sume that 
average connection .speeds are ahout 
14.4 Kbps. 



Use very short file names without spaces (eight characters 
or less), and avoid using the following characters in file 
names: 

Character Name 

< > angle brackets 

\ back slash 

I vertical bar 

[ ] brackets 

: colon 

, comma 

= equal sign 

/ forward slash 

-t* plus sign 

quotation mark 
; semicolon 



9. Test the download speed of your Web page. 

HTML documents may be built on your hard drive using a 
text editor such as SimpIeText or TeachText. Use Netscape 
of!' line to check your work. However, the download speed 
you’ll experience when you load a file from your hard drive 
will be much faster than the average Web visitor’s 14.4 or 
28.8 Kbps modem. 

As soon as you’ve developed a large graphic for your Web 
page, you should test the download speed over a 14.4 Kbps 
modem. If the graphics are slow to load, you’ll have trouble 
attracting Web visitors. Web visitors will be reluctant to 
return if they have to wait several seconds for downloads. 

10. Test your Web page on other browsers. 

Images developed on a Macintosh may appear slightly 
stretched on an IBM PC brovwser wundow due to a differ- 
ence in the aspect ratio. Pixels on an IBM PC are taller than 
pixels on a Macintosh. 
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In addition, different systems use difTerent methods for ending 
a line. The text you’ve formatted with the <PRE>, or prefor- 
matted, tag on a Macintosh may change if you move your files 
to a Unix or IBM server. 

If your fimi does not own an IBM PC, consider getting on the 
Web through another platform at a public computer rental 
facility, which rents time on the Internet by the hour. 



Pixel deiith 



Summary: Learn how pixel depth orbit 
depth, a critical color characteristic, 
will affect the performance of your Web 
pages with graphics. 




Tip: Equilibrium, the company that 
created DeBabelizer, is continually 
adding functionality to their software. A 
recent addition includes a Windows edi- 
tion of the DeBabelizer software. Look for 
further information at Equilibrium \s Web 
site located at http://www.equil.com. 



G raphic designers who have worked with Photoshop to 
produce artwork for print may not be acquainted with 
pixel depth or hit depth. Bit depth is defined as the number 
of bits used to make up a color pixel. 



Bit Depth 


Number of Colors 


2 bits 


4 colors 


3 bits 


8 colors 


4 bits 


1 6 colors 


5 bits 


32 colors 


6 bits 


64 colors 


7 bits 


1 28 colors 


8 bits 


256 colors 


16 bits 


65,536 colors 


24 bits 


16 million colors 



For print graphics, the objective is to increase the bit depth; 
for Web graphics, as in game software development, the 
objective is to reduce bit depth. 

The critical objective for a Web page artist is the same objec- 
tive shared by game developers: combine what looks like the 
largest amount of color and the smallest possible file size. 
Web pages have a critical performance issue. Web visitors 
will grow impatient and won’t want to return to a Web page 
if there’s a long delay while images download. 

1. Plan ""target*' size and physical dimensions. 

Spend time traveling the Web, and get acquainted with the 
file sizes and physical dimensions of the graphics you see. 
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The images you see that download quickly will be the ones 
you’ll want to examine closely. You can discover a file’s 
formal, the file size, and the physical dimensions by down- 
loading the image to your hard drive, as follows: 



a. Position your mouse pointer on a Web page graphic. 

b. Hold down the mouse button, and select Save This 
Image As. 



c- Let go of the mouse button, select a 



folder or your desktop for saving, 
enter the name of your file, and click 
on Save. The file name extension will 
tell you if the image is a GIF or a 
JPEG file. 

d. Open the image in Photoshop, and 
select Image Size from the Image 
pull-down menu. Note the image reso- 
lution and the physical dimensions. 

e. DeBabelizer will display the number 



i DeBabelizer f 



\A^ 


8 






Bo 









home jpg 



Original Current 
Vide:450 450 
Hi: 400 400 

Color: 17Mil 17MiI 
DPI: 72 72 

RGB: 

HSV: 

XYI: 

r 

?T777 



of colors beneath the tool box. lo. 



2. Compare image file sizes. 

a. 40 K, .JPEG. At 40 K, the Conde Nasi image downloads 
very quickly. 

b. 108 K, GIF. At 108 K, the Disney MoviePlex image 
downloads rather slowly. 




2b. 
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3. Browsers have a 256 color per page total. 

The palette you plan for one image may affect the palettes 
of other images on the page because browsers limit the 
total number of colors to 256 per page. 

DeBabelizer’s Super Palette feature selects the best 8-bit 
palette for a group of images by “polling” the images and 
determining the best colors for the images as a group. For 
instructions on how to create a Super Palette for a group of 
images, see Creating a Super Palette with DeRahelizer in 
this chapter. 

4. Experiment with lower bit depths. 

Images respond differently when you lower the bit depth. 
For example, an image with a large variety of colors will 
not respond well to a lower bit depth because palette colors 
get “used up” quickly. 

a. 8 bits, 256 colors, dithered GIF. This image of chil- 
dren waiting to climb into a school bus has a wide vari- 
ety of colors. This image begins to look patchy even 

at 8 bits. (Note the little girl’s back pack and the head- 
lights of the bus.) As a 200 K GIF file, this image will 
download slowly. 

b. 7 bits, 128 colors, dithered GIF. The image of a 
teacher and student starts to look patchy at 7 bits. As a 
1 12 K GIF file, this image will download slowly. 

c- 4 bits, 16 colors, dithered GIF. The image of the 
teacher and student holds up well in grayscale at a lower 
bit depth. As a 28 K GIF file, this image will download 
faster than the full-color version. 

Both images look superior and download faster when saved 
as JPEG. However, there are tradeoffs. For a comparison of 
GIF versus JPEG, see the next section in this chapter. (Note: 
Figure 4a, 4b, and 4c are available on the CD-ROM in the 
hack of this hook. Open the photos on a Macintosh with a 
color monitor to see the differences in hit depths.) 



4c. 
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Saving your image: 
GIF or JPEG? 



Summary: Learn about the differences 
between GIF and JPEG, two popular 
graphics file formats found on the Web. 

Tip: Most HTML tags work in the 
Netscape browser as well as Microsoft *s 
Internet Explorer browser. However, both 
bmwsers use a few unique HTML tags. 
Microsoft's Web Gallery' at http://www 
.microsoft.com/gallery contains notes 
about Internet Explore r-.specific tags and 
Netscape-specific tags. 




T he decision to save an image as GIF or JPEG may 

depend on the image. Although GIF images are popular 
because of the special effects that can be used, detailed images 
and flesh tones often look better when saved as JPEGs. 

1. GIFs are read by more browsers. 

GIF is the predominant image file fomiat used by Web page 
designers because it can be read by more browser programs as 
an inline image. Inline images appear on the browser page with 
text. External images are those tliat must be loaded and dis- 
played with an add-on viewer program, referred to as a helper 
application. 



Netscape and Internet Explorer can read JPEG images as inline 
graphics, but some other browser programs will ignore JPEGs 
tagged as inline images. A JPEG image referenced with a link 
will be displayed in a viewer application’s floating window 
when the link launches the viewer software. 

2. GIFs can be used for special effects. 

GIF images are 8-bit images that may also be stored as trans- 
parent GIFs. This type of GIF is popular for special effects 
such as fading and silhouettes. Interlaced GIFs are another 
popular option because they appear to download faster than 
non-interlaced GIFs. The image is quickly drawn in low reso- 
lution and then gradually fills in with pixels as the image is 
downloaded. 



3. GIF images sometimes have banding. 

Because GIF images are 8 bit, the image may contain banding, 
or look posterized. This is due to the way the browser reads the 
image mid usually occurs with blends and flesh tones. An 
image with a hirge amount of detail will look better if saved as 
a JPEG image. Banding, which will often be seen in an 8-bit 
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Tip: Equilibrium, the company that creat- 
ed DeBabelizer, also makes a 
DeBabelizer **Lite** pmduct. Unlike the 
full package, which supports scripting 
and batch processing, DeBabelizer Lite 
is a translation tool that contains a large 
number of ''readers and writers." (Note: 
Animation file formats, such as 
QuickTime, FLC, and ELI, are not 
supported in the Lite version of 
DeBabelizer.) 



GIF, will be smoothed in the JPEG format with some dither- 
ing. A summary of file forniat characteristics follows: 

Format Plus/Minus 

GIF Plus GIF files can be read by a majority of 
browsers as an inline image. 

Plus GIF images can be saved as interlaced 
GIFs, a format that appears to download 
faster than non-interlaced GIFs. The image is 
quickly drawn in low resolution and is gradu- 
ally filled in with pixels. 

Plus GIF images can be saved as transparent 
GIFs. This GIF drops out whatever color is 
assigned as transparent. This may be accom- 
plished with Aaron Gile’s Transparency soft- 
ware and DeBabelizer. 

Minus GIF images may appear posterized in 
some browsers. (See next page.) 

JPEG Plus Photographs do not appear posterized. 

Minus JPEG files look somewhat dithered and 
are not read as inline images by many browsers. 



4. JPEG was designed for 24-bit color. 

The JPEG compression algorithm (invented by the Joint 
Photographic Experts Group) is really intended for 24- or 32- 
bit color. When an image is compressed, this “lossy” algorithm 
throws information away. 

Should a Web designer reduce an image to 8 bits and then save 
it as JPEG? Because most of the color monitors used on the 
Web are 8-bit color, 24-bit color images on Web pages are 
unnecessarily large and a waste of color information. An 8-bit 
JPEG image stores what appears to be a lot more than 8 bits of 
information and although the loss of data may be visible on a 
printed page, it is not visible on .screen. (Note: Do not save a 
JPEG image twice as JPEG, or your image will be noticeably 
pixelated. ) Reduce your Web graphic to 8 bit, save it as a JPEG, 
but store an original 24-bit RGB image for future editing. 
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77p; Poslerization is a term that refers to a 
flattening of the brightness values in an 
image (Note: The image on this page is 
from the Pacific Coast Software collection 
of stock photography at http://www 
.pacific-coast, com. ) 
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The differences between GIF and JPEG images is most obvi- 
ous in skin tones, where the posterization that occurs is very 
pronounced. Notice the difference in the two photos on this 
page. The top photo is a JPEG image, and the photo below is 
a GIF image. 
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GIF and the LZW 

compression 

patent 



Summary: Even though there have been 
rumors that the GIF file format may dis- 
appear due to the legal dispute between 
Unisys and CompuSetre, the 8-bit file 
format, which may someday be upgrad- 
ed to 24-bit, is not going away any time 
soon. 




G raphic designers who develop Web pages appreciate 
the GIF file format for the transparent GIF, which 
makes silhouettes possible, and the interlaced GIF, which 
appear to download quickly to the browser screen in waves. 
Although the JPEG file format is superior to GIF for dis- 
playing color detail, a JPEG image can’t be saved with a 
transparent background, nor can it be interlaced. 



1. Unisys and the compression patent. 

The GIF file format, owned by CompuServe, uses LZW 
compression. LZW (Lempel, Ziv, Welch) is a lossless, 8-bit 
compression-decompression scheme that was originally 
developed by the Lempel-Ziv team, but later improved by 
Terry Welch when he worked for the Sperry Corporation. 
Unisys took over the LZW patent when Sperr>' became part 
of Unisys in 1 986. The LZW scheme, unlike a ‘lossy” com- 
pression schme, doesn’t throw away information when it 
compresses. Ever since Unisys took over the patent, they 
have been licensing the compression algorithm to online ser- 
vices and modem manufacturers. They have also been quiet- 
ly enforcing the patent in the software market, as the scheme 
is popular among companies who make image editing soft- 
ware programs. 

2. Grandfathering the license. 

In pursuing their right to the patent, Unisys grandfathered 
the license to any software product that used LZW compres- 
sion prior to Januaiy' 1995. However, as of Januaiy' 1 1,996, 
any new product, or any software product update, requires a 
licen.se. 
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HTML tags and 
page markup 



Summary: Understanding HTML, or 
the Hypertext Markup Language, is 
essential for Web page development. 




T he term markup is a publishing term used to refer to a 
tradition in print. When pages are produced in publish- 
ing, typesetting instructions, known as tags, are added to a 
typewritten manuscript. In print, tags tell typesetting soft- 
ware how to display a page. 

Unless a graphic designer works in book publishing, he or she 
may not be aware that Quark XPress, PageMaker, and other 
page layout programs can read and interpret plain text or 
ASCII text with tags containing style information. Quark’s 
system of text lags are similar to HTML, the tagging system 
used on the Web. 

Although Quark XPress is a powerful page layout program, 
its system of lags is not ideal. For example. Quark’s tags can 
describe text very accurately, but the lagging system does not 
offer tags that describe images. Publishers who use XPress 
lags to assemble books or newsletters with pictures, use 
supplementary tagging software such as Xtags from Em 
Software. 

In contrast to Quark’s sophisticated text tagging system, the 
HTML lagging system has very cmde tags for describing text. 
However, unlike XPress tags, HTML includes image lags as 
well as powerful tags that can create hypertext links across 
computer platforms and to multimedia resources such as 
sound, animation, and video. 
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Tip: The best way to leant how to use 
HTML ta^s is to visit pages on the Web 
and select Sou tve from the Edit pull-down 
menu. (In Internet Explorer, this com- 
mand is View Soiuve. ) The HTML tags 
used to compose the Web page will be dis- 
played. The soiuve code you 'll see can 
either be .saved or printed. 



The following chart shows how the Quark XPress tag sys- 
tem is similar to the HTML tag system. Xpress tags have 
been widely adopted in the book publishing industry. 



HTML 


Xpress 


Meaning 




<b> 


Turn bold on/off 


<I>...C/I> 


<i> 


Turn italic on/off 


<U>...c/U> 


<u> 


Turn underline 
on/off 


<p> 


<\n> 


New paragraph 


<BR> 


<\d> 


New line 


<CENTER> 

...</CENTER> 


</Centerx=‘0 Center a paragraph 


<BODYTEXT= ^i:bb’^<c“color ”> 
...</BODY> 


Change text color 


<FONT SIZE=value> 


</.###.##> 


Change font size 


<NOBR> 


<\!s> 


No break 



1. Special characters. 

HTML and Xpress tags both have a set of special charac- 
ters. For example, both need a method of indicating charac- 
ters that would otherwise be interpreted as part of a tag, 
such as an angle bracket. In HTML, special characters are 
referred to as character entities or numbered entities. 



HTML 


Xpress 


Meaning 


&lt: 


<\<> 


< 


> 


<\» 


> 


& 


n/a 


& 


" 


n/a 


II 



Besides providing a means to generate characters that would 
otherw'ise be interpreted by a browser as a tag symbol, charac- 
ter entities also exist to generate characters from the ISO 
Latin- 1 alphabet, w'hich do not exist in the ASCII set of char- 
acters. These characters are generated with different key 
.sequences on different computer platforms; making them spe- 
cial characters in HTML solves translation problems. 
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Tip: Ahhough the <PRE >. . . </PRE> (af> 
presences prefonnatted text, a browser 
changes the font of prefonnatted text. 



2. Starting tags and ending tags in HTML. 

Most HTML markup lags require that a set of lags be used. 
The starting tag acts much like an on switch, and the ending 
tag acts like an off switch. Together, the set of markup tags 
act on the text that lies between the tags. (Note: You can mix 
upper and lower case lettering when you create tags.) 



Meaning 


Starting Tag 


Ending Tag 


Anchor 


<A> 


</A> 


Bold style 


<B> 


</B> 



3. Formatting inside <PRE>...</PRE> in HTML. 

Although browsers usually ignore return characters and 
spacing, line breaks and blank spaces arc left undisturbed 
inside the preformatted text tag. 

4. Nesting tags in HTML. 

Nested tags are tags inside of other tags. Most lags can be 
nested, except for anchors inside of other anchors or head- 
ings inside of prefonnatted text. 
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The moveable 
grid for pictures 
and text 



Summary: Can a graphic designer 
develop a grid for a Web page? Not real- 
ly. HTML tags describe how elements 
should be placed in relationship to each 
other. Placement is not described in 
relationship to the page, because the 
page size can vary. 




W hen a graphic 
designer uses 
Quark XPress for page 
layout, he or she has a tool 
that offers very precise 
page geometry for a print- 
ed page. 
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Because a Web page can 
be resized, page elements 
need to be described in 
relationship to each other, and not 
the page. In the sample shown on 
this page, the Mesh Records image 
has been tagged with an 
ALIGN=RIGHT attribute, which 
will align the image on the right 
side of the text regardless of how 
the brow'ser window gets resized. 

Note there is a small amount of hor- 
izontal spacing on either side of the 
image to push the text away from 
the edge, which is the result of an 

HTML attribute called HSPACE shown later in this chapter. 
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If horizontal space gets added, you will only be able to con- 
trol the space on both sides of the image, but not on one side 
or the other. This page offset around the edge appears to be 
8 points or pixels. 
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Using HTML 
to move page 
elements 
horizontally 



Summary: In the absence of a grid it's 
valuable to understand how HTML can 
be used to move elements horizontally 
or vertically In Quark XPress or 
Microsoft Word, these commands would 
be referred to as paragraph-based. 




I mages and text lhal are “tagged’’ into place horizontally 
on a Web page maintain their position relative to other ele- 
ments when the page is resized. 



Tip: Most HTML tags place images in 
telationship to the left tnargin. Veiy few 
tags are available that place images on 
the right or anywhere in between. The 
examples on the next few pages demon- 
strate a few tags that can be used like tabs 
to move elements varying distances 
acwss the page. 



1. Open SimpleText. 

Use SimpleText or a word processor. If you use a word proces- 
sor, be sure to save the document as Text Only. 

2. Create a new HTML document. 

Start a new' document with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY> 



3. Add the name of a GIF file to the <BODY> tag. 

Background images can be used in Netscape. Add the name 
of the GIF file that you’d like to use as the background image 
to the <BODY> tag. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -"New.Band . g1 f > 
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4. Add an image tag. 

The <IMG> lag contains a source, or SRC parameter, which 
contains the name of the image file. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -”New_Band . g1 f ”> 

<IMG SRC-"Mesh Wave.gif> 

</B0DY> 

</HTML> 

The result is shown in Figure 4. 



5. Add text after the image. 

Unless the browser is instructed how to handle text, it will 
flow the text immediately after the image. 

<HTML> 

<HEAD> 

<TlTLE>New Side Band</T1TLE> 

</HEAD> 

<B0DY BACKGROUND-"New_Band.gif"> 

<IMG SRC-*'Mesh Wave.gif”>MM is currently in the process 
of recording a whole new batch of material which will be 
available in the Fall of '95. 

</B0DY> 

</HTML> 



I 
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5 . 

6. Add a paragraph tag after the image (optional). 

A paragraph tag <P> will flow the text on the line below the 
image and open up paragraph spacing. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -“New^Band . gi f" > 

<IMG 5RC-'*Mesh Wave.gl f'XP>MM Is currently in the 
process of recording-. 

</B0DY> 

</HTML> 



Netscape: Nem Side Band 
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Tip: Although the definition list <DL> 
tag is intended for glossaty text, it can he 
used to indent text or images incremental- 
ly acmss a page. 



7. Use the ALIGN attribute to move an image. 

The ALIGN attribute, which is part of the <IMG> tag, is the 
simplest way to move an image across the page. Use the 
ALIGN=RIGHT attribute in an <IMG> tag. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -’’New.Band . gi f ”> 

<IMG SRC-”Mesh Wa ve . gi f *ALI GN-RIGHT> 

</B0DY> 

</HTML> 




8. Use the <DL> tag to move an image or text. 

Because the <DL> tag Formats an indented list, nesting 
several <DL> tags works to further indent pictures, text, or 
both across the page. 

a. Nest two <DL> tags with text and the ALIGN=LEFT 
attribute in the <IMG> tag. (Note: The <DL> tag 
works to move an image.) 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITIE> 

</HEAD> 

<B0DY BACKGROUND -’‘New.Band . gi f> 

<DL><DLXIMG SRC-''Mesh Wave . g1 f ••ALIGN-LEFT></DLX/DL> 
MM is currently in the process of recording a whole 
new batch of material which will be available in the 
Fall of *95. 

</B0DY> 

</HTML> 
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8a. 

b. Nest four <DL> tags with text and the ALIGN=LEFT 
attribute in the IMG tag. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -•'New_Band.gi f”> 

<DL><DL><DL><OLXIMG SRC-’*Mesh 
Wave.gifALIGN-LEFT></DL></DL></DLX/DL> MM is cur- 
rently in the process of recording a whole 
new batch of material... 

</B0DY> 

</HTML> 




8b. 

9. Add space around an image with HSPACE. 

The HSPACE atiribulc added to the Image lag will push the 
text away from the image but it will add space on both sides 
of the image at once. 

Using the HSPACE attribute may be a problem if youVe try- 
ing to line up the left edge of the image with text further down 
the page. If this is the case, text offset may be created with 
extra Canvas in Photoshop which you can then make trans- 
parent with Transparency or DeBabelizer. 




Tip: HSPACE adds space on both sides of 
an image, and VSPACE adds space above 
and below. 




Nest four <DL> tags (with text) and add HSPACE. 

<HTML> 

<HEAD> 

<TITLE>Mew Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -”New_Band . gi f"> 

<DL><DL><DLXDL> 

<IMG SRC-"Mesh Wave.gi f’ALIGN-LEFT HSPACE-20> 
</DL></OL></DLX/DL>MM is currently... 

</B0DY> 

</HTML> 

10. Use <BLOCKQUOTE> to move page elements. 

The <BLOCKQUOTE> tag will indent an image or text the 
same amount as two nested <DL> tags. 

Use the <BLOCKQUOTE> tag. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -"New.Band . gi f ’> 

<BL0CKQU0TE> 

<IMG SRC-’’Mesh Wave.gi f'’ALIGN-LEFT> 

MM is currently in the process of recording a whole new batch 
of material which will be available in the Fall of '95. 
</BLOCKQUOTE> 

</BODY> 

</HTML> 




10 . 



Photography 171 . 




Tip: The <CENTER>,.,c/CENTER> 
taf^ can be used to move page elements 
horizontally. See the Image Map chap- 
ter for an example of how to use this tag. 




11 . 



11. Use <BLOCKQUOTE> to move a column. 

Depending on where you place the tag, the <BLOCK- 
QUOTE> lag will indent an image and several paragraphs. 

Use the <BLOCKQUOTE> tag. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -"New_Band . gif> 

<BL0CKQU0TE> 

<IMG SRC-”Mesh Wave.gif*XP> 

<F0NT SIZE-+2>Clubs. New York</FONTXP> 
<B>Chelsea</BXP> 

Tramps<BR> 

51 West 21st Street<BR> 

727.7788<BRXP> 

<B>East V111age</BXP> 

Brownies<BR> 

169 Avenue A<BR> 

420.8392<BR> 

CBGBs<BR> 

315 Bowery<BR> 

982.4052<PX/BL0CKQU0TE> 

</B0DY> 

</HTHL> 



2. Use the <BR> tag to add line breaks. 

In the example in Step 1 1 , notice how the <BR> lag adds a 
line break. 
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Using HTML 
to move page 
elements 
vertically 

Summary: HTML tags that move page 
elements vertically are very few in num- 
ber. (Note: For new developments in 
style sheets designed for the Web, see 
the Style Sheets And New HTML Text 
Tags chapter } 




I ntegrating inline pictures and text is challenging. For 
example, align does not refer to text alignment, as in word 
processing. Here, align refers to the position of an image. 



1. ALIGN=BOTTOM. 

In this example, ALlGN=BOTTOM lines the text up with 
the bottom of the image. 

Use the ALIGN=BOTTOM attribute in an <1MG> tag. 
(Note: The <FONT SIZE=-v2> tag has been used to make 
the words Clubs, New York slightly larger than the body 
type. The value can be a number from 1 through 7 . The num- 
ber 3 is considered the base font, or the default size). 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -"New.Band . gi f ”> 

<BL0CKQU0TE> 

<IMG SRC-"Mesh Wave. gif’ ALIGN-B0TT0M> 

<F0NT SIZE-+2>Clubs. New York</FONTXP> 
<B>Chelsea</BXP> 

Tramps <BR> 

51 West 21st Street <BR> 

727.7788 <P> 
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<B>East Village</BXP> 
Brownies<BR> 

169 Avenue A<BR> 
420.8392<P> 

CBGBs<BR> 

315 Bowery<BR> 
982.4052<PX/BLOCKQU0TE> 




2 . 



2. AUGN=TOP. 

In this example, ALIGN=TOP really doesn’t line up the 
image with the top of the text. 

Use the ALIGN=TOP attribute in an <IMG> tag. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND -”New_Band . gi f "> 

<BR> 

<BLOCKQUOTE> 

<IMG SRC-”Mesh Wave.gif" ALIGN-T0P> 

<F0NT SIZE-+2>Clubs, New York</FONTXP> 
<B>Chelsea</BXP> 

Tramps<BR> 

51 West 21st Street<BR> 

727.7788<P> 
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<B>East Vil lage</BXP> 
Brownies<BR> 

169 Avenue A<BR> 
420.8392<P> 

CBGBs<BR> 

315 Bowery<BR> 
982.4052<PX/BL0CKQU0TE> 



3. The <BR> and <P> tags. 

In the previous example, the break line tag, or <BR>, breaks 
the line but does not add extra line spacing. 
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The paragraph tag, or <P>, also breaks the line but adds para- 
graph or line spacing. 

4. The VSPACE attribute. 

The VSPACE attribute will immediately push the text fur- 
ther from the image but will add space on both sides of the 
image at once. 

<HTML> 

<HEAD> 

<TITLE>New Side Band</TITLE> 

</HEAD> 

<B0DY BACKGROUND “”New_Band . gi f '> 

<BR> 

<BLOCKQUOTE> 

<IMG SRC-”Mesh Wave.gif” ALIGN-BOTTOM VSPACE-25> 
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Tip: For information and instructions 
on how to upload files to your Internet 
providers seiver, see the Image Map 
chapter. 



5. HTML tags used in the two previous sections. 

The lags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<B>...c/B> 

A tag used to apply boldfacing to text. 

<BLOCKQUOTE>. . .</BLOCKQUOTE> 

A tag used to create a paragraph indent on one or more 
paragraphs. 

<BODY>...</BODY> 

A lag used to open and close the body of a document. This 
lag can be used to refer to a background image in the fonn: 

<B0DY BACKGROUND-New_Band.gif”> 

<BR> 

A tag used to insert a line break. 

<DL>...</DL> 

The definition list tag is usually used for definitions or 
short paragraphs with no bullets or numbering. In this 
.section, this tag is nested several times to indent the Mesh 
Records logo. For example: 

<DL><DL><DL><DL><DL><DL><DLXIMG SRC-"Mesh 
Wave.gif’></DL> 

</DL></DL></DL></DL></DLX/DL> 

<FONT SIZE=VALUE>...</FONT> 

A tag used to change the default font size. The value can 
be any number from 1 through 7 or it can be represented 
+- any value from 1 through 7. The value 3 is considered the 
basefont, or the default font size. 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 
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Tip: The SiinpleText text processor sup- 
plied with System 7.5x is morejlexible 
than the older TeachText supplied with 
previous versions of the System, 

For example, SiinpleText allows you to 
have multiple documents open at one 
time. 



<1MG> 

Used to refer to an inline image, this tag uses the SRC 
attribute, which represents the the URL (location) of the 
image. For example: 

<IMG SRC-”Mesh Wave.gif”> 

This tag uses the ALIGN attribute (or parameter) to indi- 
cate the placement of an inline image. Options include 
TOP, BOTTOM, LEFT, and RIGHT. For example: 

<IMG SRC-"Mesh Wave.gif’ ALIGN-LEFT> 

This tag also uses the HSPACE attribute, which adds 
space on both sides of an image. For example: 

<IMG SRC-”Mesh Wave.gif” ALIGN-LEFT HSPACE-20> 

<P> 

A tag used to indicate a new paragraph. This tag does not 
require an ending tag. 

<T1TLE>...</TITLE> 

A tag used to describes the title of a document, which 
shows up inside a document’s title bar. 
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Creating a 
banner graphic or 
splash screen 



Summary: Learn how to create a ban- 
ner graphic or splash screen — the first 
image Web visitors will see when they 
visit your Web page. 

Tip: When you capture a screen image 
with Commands Shifts 3, the SimpleText 
file can be opened as a PICT image in 
Photoshop. The file size of this image will 
be small if the monitor is set to 256 colors 
and large if the monitor is set to millions 
of colors. 




W ith the preparation of a banner graphic, Mark Elbert 
demonstrates how to size, scan, edit, and adjust the 
palette of a banner image. (Note: See Convert a Pantone 
RGB value to a Web page color with the BBS Color Editor 
in the Online Tools chapter for steps on how to assign color 
to the browser background and text.) 

1. Plan the size of your banner. 

To calculate the maximum width available for a banner 
graphic, Mark opened Netscape on a 14-inch monitor, 
resized the browser window to the width of the monitor, 
and captured the contents of the screen with Command+ 
Shift+3. This command created aTeachText file, which 
could then be opened as a PICT document in Photoshop. 

In Photoshop, Mark selected WindowIPalettesIShow Info and 
dragged a rectangular marquee to select the inside browser 
area. The Show Info palette gave Mark a width measurement 
of 620 pixels and a height measurement of 320 pixels. Using 
the same technique, he also measured the offset distance 
between the edge of the browser window and the art on 
screens he captured as TcachText images. Mark discovered 
this offset is 8 pixels. These clues helped him determine the 
maximum width available for artwork. 

Rather than fill the entire screen, Mark chose 504 pixels for 
the width of his banner, 100 pixels less than the maximum 
I measurement. The height he chose was 144 pixels. 
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Tip: Btvwser softw are reads one palette 
of 2 56 colors per page. If you *re building 
a page with more than one image, consid- 
er creating a Super Palcltc, ora palette 
that consists of the best 256 colors for a 
group of images. 

If you need to transfer the image wmh this 
palette infonnation via modem, ahvays 
transfer it as binary information so this 
infonnation is not lost. {Note: For infor- 
mation on how' to create a Super Palette, 
.sw Creating a Super Palette with 
DeBabelizer in this chapter). 
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2. Scan your artwork. 

Using a 24-bit flatbed scanner, Mark scanned more infor- 
mation than he needed (higher resolution) but to the exact 
dimensions. After opening the image in Photoshop, he 
resampled the image to 72 pixels per inch and used the 
Unsharp Mask filter to correct the slight fuzziness that 
results when Photoshop interpolates pixel information. To 
duplicate Mark’s methods, follow these steps: 

a. Select Image Size from the Image 
pull-down menu. 

b. Type 72 in the pixels per inch 
field. 

c. Click on OK. 

d. Select FilterlShaipenlUnsharp 
Mask. 

e. With Preview .selected, 

Photoshop will display what the 
filter will do to your image. Choose 
25%, a Radius value of 1 .0 pixels, and a Threshold 
value of 0. 

Click on OK: the result is shown below. 
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3. Correct the color. 

After color scanning, Mark checked to see how the brightness 
and darkness tones were distributed. By mapping the lightest 
and darkest parts of the image to a white target and a black 
target, Mark corrected the color, which made a significant 
visible difference in the image. 

a. Select AdjustILcvels from the Image pull-down menu. 
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Svipci luhttp tnrQel color. 




3b. 




3c. 




b. Set a white target by double clicking on the white eye 
dropper and typing 5, 3, 3 in the C, M, Y boxes. 

(Note: Use 7, 3, 3 for images that have more dark 
values than light.) Then click on OK. 

c. Set a black target by double clicking on the black eye 
dropper and typing in 95, 85, 85, and 80 in the C, M, Y, 
K boxes. Click on OK. 

d. Investigate which area of your image is the lightest. 
Remove the “X” from Preview in the Levels dialog 
box, hold down the Option key, and slowly drag the 
white triangle on the top slider to the left. The area that 
turns white first is the lightest portion of your image. 
Remember this location. 
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e. Investigate which area of your image is the darkest. 
Make sure the “X"’ is removed from Pmview, hold 
down the Option key, and slowly drag the black trian- 
gle on the top slider to the right. The area that turns 
black first is the darkest area. 




f. Set the eyedropper tool at a 3-pixcl sample. Double- 
click the eyedropper, and select 3 by 3 Average from 
the pop-up menu. 
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g- Map the white target on the area that appeared as the 
lightest portion of your image by selecting the white eye 
dropper and clicking on that area. 

h. Map the black target on the area that appeared as the 
darkest portion of your image by selecting the black eye 
dropper and clicking on that area. 

i. Yotril notice a change in most scanned images immedi- 
ately. You'll also notice a change in the histogram 
(Figure 3i 1 ). The x-axis reflects colors from darkest 
(left) to brightest (right), and the y-axis reflects the num- 
ber of pixels with each value. The castle photo that 
results is shown in Figure 3i2. 
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4. Create your type in Adobe Illustrator. 

Type that originates in Illustrator and gets “rasterized” 
in Photoshop has neater, less jagged edges than type created 
in Photoshop. When you open an EPS file in Photoshop, 
you'll need to enter a desired resolution. Rasterized type will 
still look Jagged unless this resolution 
is sulTiciently high. For best results, open your EPS file at a 
resolution that is three to four times the screen resolution 
(288 ppi or 360 ppi). 

Rather than place Illustrator type, open the type as an EPS 
image into another file, copy it, and paste it into your banner 
artwork. (Note: If the resolution of the soiuve artwork [type J 
and destination file / banner artwork ] are not the same, the 
type will change size.) 

Either work at high re.solution for both your image and your 
type, or rasterize a type size that is in proportion to the 
changes that you will know will occur when you paste the 
type into the image. If your banner artwork is already created, 
the size type you create in Illustrator will be a function of the 
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Tip: In this example, Mark reduced pixel 
depth after he created type for his banner. 
If you use black type or. some other solid 
color, add the type to your image after you 
reduce the pixel depth of your graphic. 
(Note: See Steps 9 and 10 for instructions 
on how to reduce pixel depth. ) 
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resolution you choose for rasterizing tlie type. In the following 
example, 1 0 point (Illustrator) type is opened as an EPS image 
in Photoshop at 360 ppi, or 5 limes the resolution of the banner 
artwork file where it will be pasted. When the type gets pasted 
into the banner artwork, it will be five times as large. 

Desired Size To Create 



T>^pe Size 
(Finished 
Graphic) 


EPS 

Resolution/ 

Photoshop 


Multiplication 
(or Division) 
Factor 


in Illustrator 
(To Paste into a 
72 ppi Banner) 


32 


288 ppi 


4 


8 pt 


40 


288 ppi 


4 


10 pt 


48 


288 ppi 


4 


12 pi 


40 


360 ppi 


5 


8 pt 


60 


360 ppi 


5 


12 pi 


70 


360 ppi 


5 


14 pt 



a. Mark's banner artwork was a 72 ppi image. He 
created 10 point type in Illustrator in order to open it into 
Photoshop (or rasterize) at five times the the resolution of 
his banner artwork. He did this to demonstrate how the 
type size would change if the type’s resolution was differ- 
ent than the artwork’s resolution. 

b. After creating his type in Illustrator, Mark Elbert saved 
the type as an Illustrator file. 

5. Rasterize the EPS type, then copy and paste it. 

a. In Photoshop, Mark opened the Illustrator document and 
typed in 360 ppi as a resolution in the EPS rasterize 
dialog box. 

b. To select the type for copying, Mark selected the white 
background with the Magic Wand tool. 

c. He then selected Inverse from the Select pull-down menu. 

d. Mark copied the type and pasted it into his banner 
artwork. 
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Tip: When you place type from an EPS file 
on a Photoshop pa^e, it gets rasterized at 
the same resolution as your Photoshop 
image. If you *re working on a 72 ppi file 
and you don 7 want "jaggiesf rasterize 
the lllustratorfile by opening the entire 
Illustrator document into Photoshop and 
typing in a resolution that is time to four 
times the screen resolution. Copy and 
paste your type into your Photoshop afl- 
work, hut plan ahead on a change in size 
(.see chart on the previous page) if the res- 
olutions are different. 
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6. Create a channel. 

Mark wanted a channel to have a record of the type’s selec- 
tion, because he planned to paste an image into the type 
selection and then add a stroke to outline the type. Before cre- 
ating a channel, the opacity needed to be set to zero so the 
type’s black pixels would not become part of the background. 



a. With the type still selected, Mark selected PalettesIShow 
Layers from the Window pull-down menu. 



b. When the palette appeared, he 
dragged the opacity slider to zero 
before creating a channel. 

c- Mark clicked on the channels tab and 
selected New Channel from the 
options pull-down menu. 

d. He labeled this channel type. 
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e. To return to the RGB layer, he clicked on the 
RGB channel. 
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7. Copy an image and paste it into the type. 

a. Leaving the banner art open, Mark opened another 
image of film- 
strip art and 
copied the 
entire image to 
the clipboard. 



7a. 

b. Mark returned to the banner artwork, then loaded the 
selection of the type from the channel he had created by 
selecting Load Selection from the Select pull-down 
menu. 

c- He chose Type from the pop-up menu that followed, and 
clicked on OK. 

d. Next, he chose Paste Into from the Edit pull-down menu. 

e. Mark positioned the filmstrip art inside the type by drag- 
ging the selection with the mouse.The filmstrip art 
moved inside the type each time he dragged the mouse. 
To drop the selection, he selected None from 

the Select pull-down menu (Command+D). 

8. Add an outline to the type. 

a. Mark reloaded the type selection by choosing Load 
Selection from the Select pull-down menu. 

b. He chose Type from the pop-up menu that followed. 

c. He selected Stroke from the Edit pull-dowm menu. 
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8d. 

d. With black selected as a foreground color, he selected a 
width of 1 pixel, to be centered on the type selection at 

1 00% Opacity and Normal Mode. 

e. Mark found the combination of Stroke settings through 
trial and error. By selecting Undo from the Edit pull- 
down menu, he was able to tr>' alternate paint colors in 
the outline and vary the location. 
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9. Reduce pixel depth (using Photoshop). 

When Mark finished editing the image in RGB Mode, he 
experimented with Photoshop’s Indexed Color Mode to 
see how far he could reduce the pixel depth without altering 
the color. (Note: See the next section for instructions on 
how to reduce the hit depth in DeBcdyelizer.} 

a. Select Indexed Color from the Mode pull-down menu. 

b. Experiment by selecting smaller bit depths with and 
without dithering to see how the color in your image 
holds up. Each time you try a selection, select EditlUndo 
or press Command-i-Z il you do not like the color. 

Mark was able to reduce the image to a 6-bit color depth 
(Figure 9b) without a noticeable change in the color. 
This made a significant change in the file size. 



Bit Depth 


File Size 
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44K 


6 bit 


33K (DcBabelizer) 
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Tip: See the Online Tools chapter for 
more information about how to download 
Macintosh shareware pmgrams. 

Tip: The cost of this book doesn 7 include 
the use of the shareware programs on the 
CD-ROM. If you continue to use the soft- 
ware programs pmvided, please register 
those that you me. 
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10. Reduce pixel depth (using DeBabelizer). 

a. Open your RGB image in DeBabelizer. 

b. Select Change Pixel Depth from the Palette pull-down 
menu. Equilibrium Technologies recommends that you 
always select dithering when you reduce the number of 
colors. Although you can change the amount of dither- 
ing by selecting OptionsIDithering Options & 
Background Color from the Palette pull-down menu, 
DeBabelizer’s default setting is the amount Equilibrium 
has determined to be the best amount. 

C- Start by reducing your image to 1 28 colors and look at 
the image. If you don’t like the change, select Undo 
from the Edit pull-down menu or press Command+Z. 
Keep stepping down to fewer colors to determine when 
the color change becomes visible. Mark was able to 
reduce the palette to 64 colors without a noticeable 
change in the image. 

11. Save the image. 

a. Select Save As from the File pull-down menu (in 
Photoshop or DeBabelizer). 

b. Select CompuServe GIF or JPEG from the pop-up menu. 
{Note: Photoshop 3.0 does not add interlacing to GIF 
images. Interlacing gives the Web visitor the impression 
of a faster download by cpdckly painting the image in 
low resolution and gradually filling it in.) 

To add interlacing to a Photoshop GIF image, you’ll 
need GlFConveiler by Kevin Mitchell. DeBabelizer 
has an option to save a file as tin Interlaced GIF. (Note: 
GlFConverteris available on the CD-ROM in the back 
of this book). 

c- Give your image a name. Try to keep your file name to a 
minimum of eight characters (no spaces) with a file 
extension such as .GIF, .JPG or .JPEG. (Note: File exten- 
sions must be limited to three characters on the Windows 
3.x platform.) Removing vowels from the file name 
helps to reduce the number of characters. Mark used 
DeBabelizer and chose Interlaced GIF as the file forniat 
for saving. 
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12. Create an HTML file to test your image. 

a. Open SimpleText. Use SimpleText or your word 
processor. If you use a word processor, be sure lo save 
the document as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Newcastl e Product i ons</TITLE> 

</HEAD> 

<B0DY> 

C. Add the image tag. Reference your GIF (or JPEG) 
image with the addition of an <IMG> tag. 

<HTML> 

<HEAD> 

<TITLE>Newcastle Producti ons</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC -••Newcstle.gif"> 

d. Close with an ending </BODY> and </HTML> tag 
and save the file. Save the document. If you’re using a 
word processor, save the text as ASCII or Text Only. 
Give the file a name, and add an .HTML extension 
(.HTM if the Web .server you’re using is a DOS 
machine). 

e. Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File pull-down menu. Make sure 
your GIF image and your HTML document are in the 
same directory. 

To test a number of alternate images, create several 
HTML files and save them under different file names or 
open SimpleText and Netscape at the same time and 
vai7 between the two applications. Each time you edit 
your HTML document, .save it, and click on Reload in 
Netscape’s Toolbar to retest. 
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Linking a 
thumbnaii GIF to 
an external JPEG 



Summary: By creating a small GIF 
thumbnail on your Web page, your 
image can be viewed with most 
browsers. The thumbnail loads quickly, 
and a larger, JPEG image download 
can be optional (a JPEG viewer helper 
application will be required with 
bmwsers other than Netscape). 





B y reducing an image to a thumbnail-size GIF and 
making the thumbnail a link to a larger, JPEG version 
of (he same image, Mark Elbert created a Web page that 
can be viewed by most browsers. At the same time, he also 
provided an optional image format for a detailed photo. 

1. Save an original image in Photoshop. 

a. When you have finished editing your image in RGB 
Mode, select Indexed Color from the Mode pull-dow'n 
menu. Select Adaptive Palette and Diffusion Dither. 

Try selecting smaller bit depths until you notice an 
unsatisfactory change in the image. (Select Undo from 
the Edit pull-down menu if you're unhappy with a 
selection.) 

b. Select Save As from the File pull-down menu, 

c. Choose JPEG from the Format pop-up box. 

d. Choose an image quality. 

e. Name the file using eight characters and no spaces. 

Add .JPG as a file extension at the end of the name. 



2. Reduce your photo to thumbnail size. 

a. Open your original RGB image (without the .JPEG 
extension) in Photoshop. 

b. Select Image Size from the Image pull-down menu. 

c. Type in a small number for the width value (such as 2 
inches), and Photoshop will proportionally size the 
height for you. (Note: Record what the height and width 
values are in pixels as you will need this information for 
your <IMG> tag. )C\\ck on OK. 
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Tip: For information and instructions 
on how to upload files to your Internet 
provider's server, see the Image Map 
chapter. 



d. Select FillerlSharpenlUnShaip Mask to correct the 
fuzziness that results when you resize an image. Use 
25%, l.O Radius value, and a Threshold of 0. 

3. Save the thumbnail. 

a. Select Save As from the File pull-down menu. 

b. Choose CompuSer\'e GIF from the Fomiat pop-up box. 

c. Name the file using eight characters and no spaces. Add 
.GIF as a file extension at the end of the name. 



4. Create an HTML document. 

a. Open SimpleText. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document. Stan a new' document 
w'ilh the following markup lags: 

<HTML> 

<HEAD> 

<TITLE>Toronto</TITLE> 

<B0DY> 

C. Add an Image tag. In this example, the thumbnail GIF 
image as well as the text, Toronto, 1995, will be a link to 
the external JPEG image listed inside the anchor tag <A 
HREF></A>: 

<HTML> 

<HEAD> 

<TITLE>Toronto</TITLE> 

</HEAD> 

<B0DY> 

<A HREF - ••toronto.jpg”XIMG SRC-*’Tor_sm.gi f*> 

Toronto. 1995</A> 

</B0DY> 

</HTML> 
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d. Add image sizing to your image lag (optional). Image 
sizing is a Netscape feature that adds speed to the down- 
loading of images. When Netscape encounters an inline 
image, it builds a bounding box to display the image. 
With the height and width information in the <IMG> 
lag, the bounding box can be built without delay. 

The height and width in pixels can be obtained from the 
Image Size dialog box in Photoshop. In this example, 
the width is 144 pixels, and the height is 1 23 pixels: 

<A HREF - "toronto. jpg''XIMG SRC-’*Tor_sm. gi f ' 
WIDTH-144 HEIGHT-123> Toronto. 1995</A> 

e. Control the width of the image border (optional). 
When you make an image an anchor, or a link, the 
browser will display a colored border to act as a clue for 
visitors. For menu buttons that are obvious links, the 
border can be turned off by adding BORDER=0 to your 
<IMG> lag. In this example, this would be written: 

<A HREF - ••toronto.jpg”XIMG SRC-”Tor_sm.g1 f 
WIDTH-144 HEIGHT-123 B0RDER-0> Toronto. 1995</A> 

{Note: For the formatting of this hook, the lines are 
broken. ) 

f- Save the file. Save the document in SimpleText, 
TeachText, or your word processor. If you’re using a 
word processor, save the text as ASCII or Text Only. 
Give the file a name and add an .HTML extension 
(.HTM if the Web server you’re using is a DOS 
machine). 

g- Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File pull-down menu. Make sure 
your GIF image, your JPEG image, and your HTML 
document are in the same directory. 

h. Test the HTML document in other browsers. In 
browsers other than Netscape, a JPEG viewer will be 
launched when you click on either the thumbnail or the 
text link. The JPEG image will be displayed in a sepa- 
rate floating window. 
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5. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<A>...</A> 

Referred to as an anchor, this tag uses the HREF attribute 
to link to an external file or anchor. For example: 

<A HREF-”Toronto. jpg'’>Toronto, 1985</A> 

{Note: The file name must include the path name if the file 
is located in another directory. ) 

<BODY>...c/BODY> 

A tag used to open and close (he body of a document. 
<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<HEAD>..,</HEAD> 

A tag used to open and close the header portion of a 
document. 

<IMG> 

Used to refer to an inline image, this tag uses the SRC 
attribute that represents the the URL (location) of the 
image. For example: 

<IMG SRC-”Tor_sm.gif> 

In this section, image sizing was added to the image tag 
with the WIDTH and HEIGHT attributes. For example: 

<IMG SRC-”Tor_sm.gif WIOTH-144 HEI6HT-12> 

To turn off the image border, the BORDER=0 attribute 
can be used in the image tag. For example: 

<IMG SRC-”Tor_sm.g1f” WIDTH-144 HEIGHT-123 
BORDER-0> 

<TITLE>...</TITLE> 

A lag used to describe the title of a document that shows 
up inside a document’s title bar. 
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Wrapping text 
around a photo 



Summary: Prepare a Photoshop intake 
with extra background to simulate a 
text offset for a text ** runaround.** Use 
an <IMG> ta^ in an HTML document 
with an ALIGN attribute to get the text 
to wrap. 




Transparency 
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A lthough space can be created around an image with the 
HSPACE attribute, which is used in the <1MG> tag, 
Mark didn’t want the browser to add horizontal spacing on 
both sides of the image he planned for his Web page. 

Mark created additional background and filled it with a gray 
that matches mo.st browser backgrounds. He then used soft- 
ware that assigned the background a transparent value. 

1. Create a text offset. 

Text offset is the distance between an image and the text. Add 
a background equal to your desired offset distance with the 
ImagelCanvas Size command in Photoshop. This “extra” 
edge around the photo can be assigned a transparent value 
using Transparency, by Aaron Giles (available on the CD- 
ROM in the back of this book), or DeBabelizer, a sophisti- 
cated color palette manipulation and file conversion tool 
from Equilibrium Technologies. 

a. Working in RGB Mode, select Canvas Size from the 
Image pull-down menu. 

b. In the Canvas size dialog box, click on the box-map to 
indicate where your image should go when you add can- 
vas. Add background by increasing the values in the 
width or height box. 
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Tip: See the Page Layout Tools chapter 
for instructions on usin^ PhotoGIF, a 
Photoshop pluf»-in that will make GIF 
files transparent. 



c. Before you save, select Indexed Color from the Mode 
pull-down menu. Experiment to see how much you can 
reduce the bit depth without altering the image. Always 
select Adaptive Palette, and Diffusion Dither. 

When you’re satisfied with the dimensions of the back- 
ground, choose Save As from the File menu, and select 
CompuServe GIF from the Format pop-up box. 

d. Before you open your file in a program that can write a 
transparent GIF file, color the background a shade that 
is not in the photo. 

Mark chose a blue-gray (Note: Pick a shade that has 
a color and tonal value close to the background becau.se 
both Transparency and DeBabelizer leave a tiny trail of 
pixels around the edge of the image.) 

2. Make the background transparent 
(Using Transparency). 

a. Use the FilelOpen GIF 

command in the Transparency 
software to open the GIF file. 

b- Press and hold the mouse 
pointer on the background 
shade. When you let go of the 
mouse, the background will 
change to a gray color. This 
shade is now transparent. 

c- Choose Save As from the File 
menu, and select GIF89. 

3. Make the background transparent (using DeBabelizer). 

a. Use the FilelOpen command in DeBabilizer software to 
open the GIF file. 

b. Select OptionsIDithering & Background Color from the 
Palette pull-down menu. 
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c- Click the RGB radio buUon at the bottom of the screen. 

d. Use the Eyedropper tool to select the background shade 
you'd like to be transparent. 

e. Choose Save As from the File pull-down menu. 

f- Sclcx't GIFlInterlaced & Transparency from tlie pop-up box. 



1 Non-interlaced 


GIF 1 


1 Interlaced 


Dr. Halo CUT 


1 Non-Interlaced O' Transparency 


IMG 


K/Interloced O' Transparency 


JPEG.JFir 
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g. DeBabelizer will give your file name a .GIF extension. 
Save the file. 

4. Use SimpleText to create an HTML file. 

SimplcText from Apple Computer is a useful tool for creat- 
ing HTML files. It’s small (77 K), it’s distributed with 
System 7.5, and it saves HTML text files in the ASCII form 
that’s required by browser programs. Microsoft Word users 
can save a text file as Text Only or as ASCII. 

a. Open SimpleText. Use SimplcText or a your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Wrapp1ng Text</TITLE> 

</HEAD> 

<B0DY> 
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Tip: An AOL account is now very simi- 
lar to an Internet PPP account with an 
Internet provider. Any Internet client 
software may be run over an America 
Online connection. Launch your AOL 
software, and then launch an Internet 
client. (Note: Windows users should 
minimize their AOL software before 
launching Internet client .software. ) 



C. Add an image tag. 

<HTML> 

<IIEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<BODY> 

<IMG SRC - •*MarkT.gif”> 

d. Add an ALIGN attribute to your <1MG> tag. 

The ALIGN attribute in an <IMG> tag controls the way 
the image aligns with text. In this next example, 
ALIGN=LEFT moves the image to the left edge of the 
page and the text wraps around on the right. 

<IMG SRC - ’’MarkT.gif ALIGN-LEFT> 

e. Add headlines and HTML headline tags. The HTML 
tags for headlines range from <H 1 >. . .</H I > through 
<H6>...</H6>. <H 1> is the largest headline size avail- 
able, and <H6> is the smallest. The actual size of this 
type will he relative to whatever the Web visitor has set 
as a default font size in his or her browser. For example, 
if a Web visitor has never altered the font size in 
Netscape’s Preferences dialog box, the default size for 
body text will be 12 points. 

All of the headline or title sizes will be relative to 
this basefont size. In this example, Mark Elbert and 
Ba.ssi.st have been tagged with headline tags <H2> 
and <H3>. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC - "MarkT.gir ALIGN-LEFT> 

<H2>Mark El bert></H2XP> 

<H3>Bass1st</H3XP> 
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f. Use the font size tag (optional). Font size can be 
controlled with the <FONT SIZE=value> lag where values 
range from I through 7. In this system, the basefont has a 
value of 3. 

This tag can also be written with a preceding + or - to indicate 
a size that is relative to the basefont. The entire headline or 
just the initial capital can be controlled, depending on the 
placement of the tags. 

Notice the tag is placed inside the headline lag and the end- 
ing </Font> tag is required. 

<H2XF0NT SIZE-+3>Mark El bert</F0NTX/H2><P> 

<H3XF0NT SIZE-+3>Bass1st</F0NTX/H3XP> 

In this example, the font size tag is used to make the initial 
capital larger: 

<H2XF0NT SIZE-+3>M</F0NT>ark 
<F0NT SIZE-+3>E</F0NT>lbert</H2XP> 

<H3XF0NT SIZE-+-3>B</F0NT>assist</H3XP> 

g. Add comment lines to your document (optional). 
Comment lines are ignored by the browser and will never 
show up on your Web page. They provide a means of docu- 
menting the details of how the document was constructed. 
Use <!....-> to create comments. For example: 

<I--This text changes the first week of each month. -*> 
(Note: Avoid using special characters such as <,>,&, and 
! in comment lines. ) 

h. Add the body text and ending tags. 

<HTML> 

<HEAD> 

<TITLE>Wrapp1ng Text</TITLE> 

<B0DY> 

</HEAD> 

<IMG SRC - •'MarkT.gif* ALIGN-LEFT> 

<H2>Mark El bertX/H2XP> 

<H3>Bass1st</H3XP> 

Mark, co-founder of Mother Mary, hails originally 
from Bowie. Maryland... 

</Body> 

</HTML> 
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I. Test the HTML document in Netscape. Open your doc- 
ument in Netscape to test the appearance of your Web 
page. 
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3. Flip the image, and try an ALIGN attribute. 

Text can wrap differently if you use the ALIGN attribute in 
the <IMG> tag. In this example, to get text to wrap on the left 
side of the image, Mark used the ALIGN=RIGHT in the 
<IMG> tag. 

a. Open the image in Photoshop. If the image needs to be 
reversed, Hip it in Photoshop (or DeBabelizer). 

b. Flip the image. Select FliplHorizontal from the Image 
pull-down menu. 

c. Resave as a GIF image. Select Save As from the File 
pull-down menu, and give the image another name. 

d. Make the background transparent. Use Transparency 
or DeBabelizer to make the image transparent. (Note: 
Because Photoshop cannot write the transparent GIF 
information into the document header, this information is 
lost if you edit and save your document in Photoshop.) 

e. Add the ALIGN attribute to the HTML file. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC - ••HarkT.gifALIGN-RIGHT> 

<H2>Mark El bert></H2XP> 

<H3>Bassist</H3XP> 

Mark, co-founder of Mother Mary, hails originally from 
Bowie, Maryland... 

</B0DY> 

</HTML> 

f. Resave the document, and test it in Netscape. Although 
the other ALIGN attributes (RIGHT, TOP, BOTTOM, 
and MIDDLE) are not appropriate for Mark’s image, you 
may want to test others with smaller images. 
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Controlling text 
wrap with HTML 

Summary: Use HTML <IMG> tag 
attributes VSPACE ami HSPACE as a 
way to control text wrap around an 
image. 
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I n this example, Mark used attributes HSPACE and 
VSPACE with an <IMG> tag. By assigning each a value 
in the HTML document, a text offset could be controlled. 

1. An image with no extra background. 

a. Open the image in Photoshop. Crop any extra back- 
ground off the image that will have a text runaround. 

b. Save as a GIF image. Select Save As from the File 
pull-down menu, and save the image as a CompuServe 
GIF file. 

2. Use SimpleText to create an HTML file. 

a. Open Simpletext. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Wrapp1ng Text</T1TLE> 

</HEAD> 

<B0DY> 
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Tip: With Netscape and SimpleText 
both open, tty varying the numbers 
assigned to VSPACE and HS PACE, re- 
save your text file, switch to Netscape, 
and reload the SimpleText file to see the 
results. 
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C. Add an image tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<BODY> 

<IMG SRC - "Mesh Wave.gif’> 

d. Add the alignment tags. 

<HTML> 

<HEAD> 

<TITLE>Wrapp1ng Text</TITLE> 

</HEAD> 

<BODY> 

<IMG SRC - "Mesh Wave.gif" ALIGN-LEFT VSPACE-5 
HSPACE-10> 

e. Add the body text and ending tags. 

<HTHL> 

<HEA0> 

<TITLE>Wrapp1ng Text</TITLE> 

</HEAD> 

<B00Y> 

<IMG SRC - "Mesh Wave.gif" ALIGN-LEFT VSPACE-5 
HSPACE-10> 

This four-song tape is one of the best new hard rock 
offerings I’ve heard since Mother Love Bone’s Apple... 
</B0DY> 

</HTML> 

f . Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File pull-down menu. Make sure 
your HTML document and your image are in the same 
directory. 
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Tip: For infomiation and instructions 
on how to upload files to your Internet 
provider's setver see the Image Map 
chapter. 

<FON T SIZE=VALUE>...</FONT> 

A tag used to change the default font size. Values range 
from I through 7. The tag can also be written with a 
preceding + or - to indicate a size that is relative to the 
basefont. 

<H2>...</H2> 

<H3>...</H3> 

Tags used to enlarge text, as to indicate a heading. Lower 
numbers indicate larger type. The options range from 
<H1> through <H6>. 

<HTML>...c/HTML> 

A tag used to open and close an HTML document. 
<HEAD>...<mEAD> 

A tag used to open and close the header portion of a 
document. 

<1MG> 

Used to refer to an inline image, this tag uses the SRC 
attribute that represents the URL (location) of the image. 
For example: 

<IHG SRC - ••clear. g1f*> 

This tag uses the ALIGN attribute (or parameter) to indi- 
cate the placement of an inline image. Options include 
TOP, BOTTOM, LEFT, and RIGHT. For example: 

<IMG SRC - "Mesh Wave.gif" ALIGN-LEFT> 



3. Summary of HTML tags used m this section. 

The tags you see in this list (in alphabetical order) rellect the 
HTML 3.2 specification. 

<BODY>...</BODY> 

A tag used to open and close the body of a document. 
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Tip: ClarisWorks includes an HTML 
import and export feature that is built 
into the software 's XTND functions. The 
software also includes templates for cre- 
ating Web documents. {http://www.claris 
.com/products/claris/clarispage20/clar- 
ispage20.html) 



The <IMG> tag also uses the HSPACE attribute, which 
adds space on both sides of an image. For example: 

<IMG SRC - "Mesh Wave.gif ALIGN-LEFT HSPACE-20> 

< 1 >> 

A tag used to indicate a new paragraph. This tag does not 
require an ending tag. 

<Tm.E>...</TITLi:> 

A tag used to describe the title of a document that shows 
up inside a document’s title bar. 
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Fading an image 
into the browser 
background 



Summary: Photoshop *s gradient tool 
and Quick Mask option can be used 
to **fade ” an image to the gray that 
matches most browser backgrounds. 




la. 
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P hotoshop’s strength is image editing. In this example, 
Mark Elbert discovered a method to fade an image into 
the browser background. A similar technique can also be 
used to create a “fuzzy” drop shadow. 



1. Adjust Photoshop’s gradient tool. 

Open your image in Photoshop, and adjust Photoshop’s 
gradient tool setting. 

a. Double click on the gradient tool (Figure la), and select 
Radial from the Type pop-up menu. 

b. Drag the Opacity slider to 50%. 

c. Drag the Radial Offset slider to 50%. 

d. Drag the Midpoint slider to 50%. 



2. Work in Quick Mask Mode. 

a. Double click on the Quick Mask icon 
at the base of the Toolbox. 
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b. Select Color Indicates Masked Areas, 
and type 50% in the Color, Opacity field. 

c. With the Quick Mask icon still selected, use the crosshair 
pointer provided in this mode, and draw a radius line 
from the center of your image outward and release the 
mouse button. 



d. Switch to Selection Mode by clicking 
the icon to the left of the QuickMask 
Mode icon at the base of the Toolbox. 














2d. 
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3. Set the background color. 

a. Double click on Ihe background color swatch at the base 
of the Toolbox. 

b. Type 20! into the R, G, and B fields. Click on OK. 

4. Subtract the "unmasked’^ part of the image. 

When you mask the middle of your image with a radial gra- 
dient mask, you protect the shaded area from further image 
manipulation in the Selection Mode. 

With a background shade equivalent to the gray you find in 
most browser backgrounds, press the Delete key. 

The image will appear to fade into the gray color. By vary- 
ing the Midpoint setting in the Gradient Tool Options 
palette, you can make the mask stronger or weaker in the 
middle. 

5. Create an HTML file to test your image. 

a. Create an HTML document with an <IMG> tag. 

<HTML> 

<HEAD> 

<TITLE>Castle</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC -"Castle. gif”> 

</B0DY> 

</HTML> 

b. Save the file. Save the document in SimpleText, 
TeachText, or your word processor. If yotfre using a 
word processor, save the text as ASCII or Text Only. 
Give the file a name and add an .HTML extension. 

C. Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File pull-down menu. Make sure 
your HTML document and your image are in the same 
directory. 
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Create a tiled 
background 



Summary: Usitif* Netscape extensions 
to HTML, an ima^e can be tiled in the 
browser window. 
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T O create a wallpaper effect, Mark used a small photo 
and ghosted it with a white fill at an opacity level of 
85%. By keeping the background very light, type can be 
loaded on lop and still be readable. Using the Netscape 
extensions to HTML, he created an HTML document that 
tiled the image across the browser’s background. 

1. Create a tile. 

When you’re planning a tile pattern, any size image may be 
used. Netscape will repeat the image to fill the background. 
Working in RGB Mode, reduce the size of your image to the 
desired size of your tile. 

2. Ghost the image. 

a. Choose Select All from the Select pull-down menu, 

b. Select Fill from the Edit pull-down menu, 

c. Select While from the Use pop-up menu, 

d. Type 85% in the Opacity field. 

e. Select Normal from the Mode pop-up menu. 

Click on OK. 

f. The resulting image is showai in Figure 2f. 
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3. Reduce the bit depth. 

Before you save, select Indexed Color from the Mode pull- 
down menu. Experiment to see how much you can reduce 
the bit depth without altering the image. Always select 
Adaptive Palette, and Diffusion Dither. 
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4. Save this image as a GIF file. 

Choose Save As from the File pull-down menu, and select 
CompuServe GIF from among the choices on the Format 
pop-up box. 

5. Create an HTML file to test your image. 

a. Create an HTML document with an <IMG> tag. 

<HTML> 

<HEAD> 

<TITLE>Mesh</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC -”Mesh.gir*> 

</B0DY> 

</HTML> 

b. Save the file. Save the document in SimpleTexl, 
TeachText, or your word processor. If you’re using a 
word processor, save the text as ASCII or Text Only. 
Give the file a name, and add an .HTML extension 

C. Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File pull-down menu. Make sure 
your HTML document and your image are in the same 
directory. 
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Create a 
full-bleed 
photo background 
with larger tiles 

Summary: Netscape will tile any size 
image. Larger images will appear to be 
fiill-bleecl images. 





T o create a full-bleed photo background, Mark filled in a 
black-and-white photo with white, in order to ghost the 
image. Using the Netscape extensions to HTML, he created 
an HTML document, which causes the full image to fill the 
browser’s background. 

1. Follow steps for creating a tiled background. 

When you’re planning a tile pattern, any size image may be 
used. Netscape will repeat the image to fill the background. 
Follow the steps for creating a tiled background, presented 
earlier in this chapter and shown here: 



a. Create a tile. 

b. Ghost the image. 

c- Reduce the bit depth. 

d. Save the image as a GIF file. 

e. Create an HTML file to test your image. 

2. The background tiles as you add content. 

You will not be able to scroll and look at the tiled back- 
ground until you’ve added content to your HTML file. 
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Creating a 
silhouette 
on an image 
background 

Summary: Silhouettes are created using 
a transparent GIF image. In this exam- 
ple, the background loads first when the 
Web page opens, and the silhouette can 
be loaded on top as an interlaced or 
non-interlaced image. 




Tip: See the Page Layout Tools chapter 
for instructions on how to use 
PhotoGIF, a Photoshop plug-in that will 
make GIF files transparent. 




I n this example, the positioning of the silhouette images 
was a greater challenge than the creation of the transpar- 
ent GIF images. To position the transparent GIF images 
down the page, Mark Elbert experimented with the 
VSPACE attribute in the second image tag. 

1. Make your image background transparent 
(using Transparency). 

a. U.se the FilelOpcn GIF command in the Transparency 
software to open the GIF file. 

b. Press and hold the mouse pointer on the background 
shade. When you let go of the mouse, the background 
will change to a gray color. This shade is now transparent. 

c. Choose Save As from the File menu, and select GIF89. 

2. Make your image background transparent (using 
DeBabelizer). 

a. Use the FilelOpen command in DeBabelizer .software to 
open the GIF file. 

b. Select OptionsIDithering & Background Color from the 
Palette pull-down menu. 

c- Click the RGB radio button at the bottom of the screen. 
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Tip: MacLink/Plus, a well-known trans- 
lation utility from Dataviz now converts 
Mac and Windows formats to and from 
HTML(http:/Avm\ulataviz.comAJpgrade/- 
upgmlpjwme. html ). 



b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

C. Add a body background tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<IMG SRC - "MarkT.gif”> 

<B0DY BACKGROUND-”Toronto_Lg . gi f”> 

d. Add an image tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping text </TITLE> 

<B0DY BACKGROUND-”Toronto_Lg . gi f> 

<IMG SRC-”MarkT.gif”> 

e. Add a beadline tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY BACKGROUND-”Toronto_Lg . gi f ’> 

<IMG SRC - •'MarkT.gif”> 

<H2>Hother Mary</H2> 



d. Use the Eyedropper tool to select the background shade 
you’d like to be transparent. 

e. Choose Save As from the File pull-down menu. 

f- Select GIFlInterlaced Transparent from the pop-up box. 

g- DeBabelizer will give your file name a GIF extension. 
Save the file. 

3. Use SimpleText to create an HTML file. 

a. Open SimpleText. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 
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Tip: Microsoft provides free copies of 
their Internet Assistant software for 
Microsoft Word and Micosoft Excel 
users. The Assi.stant tools convert 
Word and Excel documents into 
HTML-ecfuivalent documents. Visit 
http://www.microsoft.com/word/fs _\vd 
. htm and http://www. micro.soft. com 
/msexcel/internet/ia. 



f . Add a group of nested definition list tags. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY BACKGROUND-”Toronto_Lg . g1 f ’> 

<IMG SRC - ’•HarkT.gif**> 

<H2>Mother Mary</H2> 

<DL><DL><DL><DL><DLXIMG 

SRC-**Hand50_bbT.gif”></DL></DL></DL></DLX/DL> 

g. Insert the ALIGN=R1GHT attribute in the image tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY BACKGROUND»"Toronto_Lg.gif”> 

<IMG SRC - ’•MarkT.g1f"> 

<H2>Mother Mary</H2> 

<DLXDLXDLXDLXDLXIMG 

SRC-"Hand50_bbT.gif*ALIGN-RIGHTX/DLX/DLX/DL> 

</DLX/DL> 

h. Add four more headlines. 

<HTML> 

<IIEAD> 

<TITLE>Wrappi ng Text</TITLE> 

</HEAD> 

<B0DY BACKGROUND-“Toronto_Lg . gi f •*> 

<IMG SRC - '•MarkT.gif”> 

<H2>Mother Mary</H2> 

<DLXDLXDLXDLXDLXIMG 

SRC-'’Hand50_bbT.gifALIGN-RIGHTX/DL> 

</DLX/DLX/DLX/DL> 

<H3>Jarett. guitar, main vox</H3> 

<H3>Steve Licorice, guitar. vox</H3> 

<H3>Mark Elbert, bass, occasional keys</H3> 

<H3>Paul Jay. drums</H3> 
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Tip: NetObjects Fusion is a hot new 
page layout software tool for graphic 
designers who want to create Web docu- 
ments. Founded in November 1995 by 
Rae Technology Inc. and Studio 
Archetype (formerly Clement Mok 
Design f NetObjects, Inc, has intro- 
duced NetObjects Fusion jbr Windows 
95/NT and the Power Macintosh. 



i. Add a second image tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 
</HEAD> 

<B0DY BACKGROUND-"Toronto_Lg . gi f" > 
<IMG SRC - "MarkT.gif”> 

<H2>Mother Mary</H2> 



Tip: Download a 30-day trial version of 
NetObjects Fusion from htp:/Avmv 
.netobjects.com 



<DL><DL><DL><DL><DLXIMG 

SRC-"Hand50^bbT.gir'ALIGN-RIGHTX/DL> 

</DLX/DLX/DLX/DL> 



<H3>Jarett, guitar, main vox</H3> 
<H3>Steve Licorice, guitar, vox</H3> 



<H3>Mark Elbert, bass, occasional keys</H3> 

<H3>Paul Jay, drums</H3> 

<IMG SRC-"BackT2.gif”> 

j. Add the VSPACE attribute to the second image tag. 

<HTML> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"Toron to.Lg . gi f"> 

<IHG SRC - "MarkT.gif”> 

<H2>Mother Mary</H2> 

<DLXDLXDLXDLXDLXIMG 

SRC-"Hand50_bbT . gi f •ALIGN-RIGHTX/DL> 
</DLX/DLX/DLX/DL> 

<H3>Jarett, guitar, main vox</H3> 

<H3>Steve Licorice, guitar, vox</H3> 

<H3>Mark Elbert, bass, occasional keys</H3> 

<H3>Paul Jay, drums</H3> 

<IMG SRC-"BackT2.gif" VSPACE-120> 

k. Add ending tags. 

</Body> 

</HTML> 
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Tip: For information and instructions 
on how to upload files to your Internet 
pwvideFs seiTen see the Image Map 
chapter 



4. HTML tags used in this section. 

The lags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<BODY>...</BODY> 

A tag used to open and close the body of a document. This 
tag can be used to refer to a background image in the fomi: 

<Body BACKGROUND-”Toronto_Lg . gi f ’> 

<DL>...</DL> 

The definition li.st tag is u.sually u.sed for definitions or 
short paragraphs with no bullets or numbering. In this 
section, this tag is nested seven limes in order to indent 
the Mesh Records logo. For example: 

<DL><DL><DL><DL><DL><DL><DLXIMG 

SRC-”Hand50_bbT.g1f'X/DL> 

</DLX/DLX/DLX/OLX/DLX/DL> 

<H2>...</H2> 

<H3>...</H3> 

Tags used to enlarge text, as to indicate a heading. Lower 
numbers indicate larger type, and the options range from 
<H 1 > through <H6>. 

<HEAD>...</HEAD> 

A lag used to open and close the header portion of a 
document. 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<IMG> 

Used to refer to an inline image, this tag u.ses the SRC 
attribute that represents the URL (location) of the image. 
For example: 

<IMG SRC-”Mesh Wave.gif*’> 

This tag uses the ALIGN attribute (or parameter) to indi- 
cate the placement of an inline image. Options include 
TOP, BOTTOM, LEFT, and RIGHT. For example: 

<IMG SRC-"Hand50_bbT.gir ALIGN-RIGHT> 
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This tag also uses the VSPACE attribute, which adds 
space above and below an image. For example: 

<IMG SRC-”Mesh Wave. gif' VSPACE-120> 

<TITLE>...</T1TLE> 

A lag used to describe the title of a document which 
shows up inside a document’s title bar. 
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Creating a 
drop shadow in 
Photoshop 



Summary: Use Photoshop \s selection 
tools and channels to record the outline 
of an image. Next, create a drop shadow 
by blurring the edge of the shadow \s 
channel image with the Gaussian Blur 
fdter and filling the selection with 50% 
black. 






la. 



<^n: |20l I 
QC: |201 I 

vJH: |2QI I 



lb. 




I n this example, Mark created “fuzzy” drop shadows for 
photo silhouettes in Photoshop by using channels. 
Because he planned to make the background of each silhou- 
ette transparent, Mark minimized the amount of “fringe” 
from the fuzzy drop shadow by starting with a gray back- 
ground that was very similar to the gray in the browser 
background. 

1. Set the image background color to gray. 

a. With the Magic Wand tool, select the background of the 
object that will have a drop shadow. 

b. Double click the background color sample in the Toolbox 
and type 20 f 20 f 20 J as an RGB value. This gray is very 
close to the brow.ser background. 

c- With the background still selected, press the Select key 
to fill the background with the specified shade of gray. 
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2b. 




2c. 




2d. 




2. Create two channels. 

a. If it is not still selected, select the background of the 
object that will be shadowed. 

b. Choose Inverse from the Select pull-down menu. 

c. With the object selected, select PalettesIShow Channels 
from the Window pull-down menu. 

d. Press on the Channels pop-up menu, and select New 
Channel 

e. Give the channel the same name as your object. 




f. To create the second channel, which will be the shadow 
channel, select Duplicate Channel from the Channel pop- 
up menu. 

g- Name this channel shadow. 



Dupllcnte Channel i 



Duplicate: hand 

fl$: jshodoiii 



— Destination - 



Document: | BackT2.gif 

Name: | 

□ Inuert 



: C 



QK 



Cancel 



2g. 
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3a. 
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Gaussian Blur 
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4b. 



3. Use the Offset filter. 

The shadow w'ill need to be offset to the right and down at 
least 20 pixels in each direction. The offset filter will make 
this change. 

a. Select the Shadow channel in the Channels palette. 

b. Select OtherlOffset from the Filter pull-down menu. 

c. Select Repeat Edge Pixels. Fill in 20 for Horizontal Pixels 
Right and Vertical Pixels Dowm. 

d. Click on OK, 




3c, 3d. 

4. Gaussian Blur creates the ''fuzziness.’’ 

a. With the Shadow channel still selected, choose 
BlurIGaussian Blur from the Filter pull-down menu. 

b. Type in 6 pixels, and click on OK. 
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5b, 7b. 
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7c. 



5. Copy the hand to the Clipboard. 

Use ihe Hand channel lo select the hand and copy it to the 
Clipboard. 

a. Choose Load Selection from the Select pull-down menu. 

b. Select Hand from the pop-up menu that follows, 
c- Select Copy from the Edit pull-down menu. 

6. Load the Shadow selection and do a fill. 

a. Choose Load Selection from the Select pull-down menu. 

b. Select Shadow from the pop-up menu that follows. 

c. Choose Fill from the Edit pull-down menu. 

d. Select Black from the Use pop-up box on the Fill 
dialog box. 

e. Type 50% in the Opacity box, select Nomial in the Mode 
pop-up, and click on OK. 




6c, 6d, 6e. 

7. Paste an original of the hand on-top. 

a. Reload the Hand channel by choosing Load Selection 
from the Select pull-down menu. 

b. Select Hand from the pop-up menu that follows. 

c- Choose Past from the Edit pull-down menu. The result is 
shown in Figure 7c. 
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8. Reduce the pixel depth (in Photoshop). 

When Mark finished editing the image in RGB Mode, he 
experimented with Photoshop’s Indexed Color Mode to see 
how far he could reduce the pixel depth without altering the 
color. (Note: See the next section for instructions on how to 
reduce the hit depth in DeBabelizer.) 

a. Select Indexed Color from the Mode pull-down menu. 

b. Experiment by selecting smaller bit depths with and 
without dithering to see how the color in your image 
holds up. If you don’t like the color, select EditIUndo or 
press Command+Z. 

Mark was able to reduce the image to a 6-bit color depth 
without a noticeable change in the color. This made a 
significant change in the file size. 



Indened Color 
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9. Reduce pixel depth (using DeBabelizer). 

a. Open your RGB image in DeBabelizer. 

b. Select Change Pixel Depth from the Palette pull-down 
menu. Equilibrium Technologies recommends that you 
always select dithering when you reduce the number of 
colors. Although you can change the amount of dithering 
by selecting OptionsIDithering Options & Background 
Color from the Palette pull-down menu, DeBabelizer s 
default setting is the amount Equilibrium has determined 
is best. 
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11a. 




Start by reducing your image to 1 28 colors and look at 
the image. If you don’t like the change, select Undo from 
the Edit pull-down menu or press Command+Z. Keep 
stepping down to fewer colors to determine when the 
color change becomes visible. Mark was able to reduce 
the palette to 64 colors (as shown in Figure 9b) without a 
noticeable change in the image. 

10. Save the Image. 

a. Select Save As from the File pull-down menu (in 
Photoshop or DcBabelizer). 

b. Select CompuServe GIF or JPEG from the pop-up menu. 
{Note: Photoshop 3.0 does not add interlacing to GIF 
images. Interlacing gives the Web visitor the impression 
of a faster download by (fuickly painting the image in 
low resolution and gradually filling it in.) 

To add interlacing to a Photoshop GIF image, you’ll 
need GIFConvertcr by Kevin Mitchell. DcBabelizer also 
has an option to save a file as an Interlaced GIF. (Note: 
GlFConverteris available on the CD-ROM in the back 
of this book. ) 

c. Give your image a name, and tr>' to keep your file name 
to a minimum of eight characters (no spaces) with a file 
extension such as .GIF, .JPG, or .JPEG. (Note: File 
e.xtensions must be limited to three characters on the 
DOS/IBM platform.) Rciwov'ing vowels from the file 
name helps reduce the number of characters. Mark used 
DcBabelizer and chose Interlaced GIF as the file format 
for saving. 

11. Make the background transparent 
(using Transparency). 

a. Use the FilelOpen GIF command in the Transparency 
software to open the GIF file. 

b. Press and hold the mouse pointer on the background 
shade. When you let go of the mouse, the background 
will change to a gray color. This shade is now transparent. 

c. Choose Save As from the File menu, and select G1F89. 
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12 . Make the background transparent (using DeBabelizer). 

a. Use the FilelOpen command in DeBabelizer software to 
open the GIF fde. 

b. Select OptionsIDiihering & Background Color from the 
Palette pull-down menu. 
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c. Click the RGB radio button at the bottom of the .screen. 



d. Use the Eyedropper tool to select the background shade 
you’d like to be transparent. 

e. Choose Save As from the File pull-down menu. 

f- Select G1 FI Interlaced & Transparency from the pop-up 
box. 
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g- DeBabelizer will give your file name a GIF extension. 
Save the file. 
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Tip: Visit the Submit It site and fill out a 
form that is part of a free ser\uce to list 
your site with 1 7 online directories — 
simultaneously ( http://suhmit-it.penna- 
Imkcom/submihit). 



I 



13. Use SimpleText to create an HTML file. 

SimpleText from Apple Computer is a useful tool for creat- 
ing HTML files. It’s small (77 K), it’s distributed with 
System 7.5, and it saves HTML text files in the ASCII form 
that’s required by browser programs. Microsoft Word users 
can save a text file as Text Only or ASCII. 

a. Open Simpletext. Use SimpleText or a your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document with an <1]VIG> tag. 
Start a new document with the following markup tags: 
<HTML> 

<IIEAD> 

<TITLE>Wrapping Text</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC-”Back.g1f> 

</B0DY> 

</HTML> 

C. Add an image tag. 

<HTHL> 

<HEAD> 

<TITLE>Wrapping Text</TITLE> 

d. Save the fde. Save the document in Simple Text, 
TeachText, or your word processor. If you're using a 
word processor, save the text as ASCII or Text Only. 
Give the file a name and add an .HTML extension. 
<B0DY> 

e. Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File Pull down menu. Make sure 
your HTML document and your image aare in the same 
directory. 
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Jane Greenbaum’s 
tips on creating 
a drop shadow in 
Painter 4.0 

Summary: Use the Create Drop 
Shadow command in Painter to create 
an automatic drop shadow. 




D rop shadows are a one-slep procedure in Painter if an 
image is a floater. Floaters are elements created in a 
Painter document that behave like objects. They are dis- 
creet images that will not interfere with other design ele- 
ments. Text elements created in Painter are considered to be 
vector-based objects or shapes and are therefore considered 
to be a type of Hoater. Image floaters behave like objects, 
but unlike shapes, they have pixel information stored as a 
mask instead of vector-based stroke and fill infonnation. 

In this section, Jane creates text with a drop shadow and 
then uses similar steps to create a drop shadow around an 
image that has been saved in a Photoshop layer. An image 
saved in a Photoshop layer will automatically be treated 
as a floater in Painter. (Note: If you wish to follow the steps 
in this section, look for Jane 's image on the companion 
CD-ROM.) 
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Painter 4.0.3 

la. 




1. Create text with a drop shadow. 

a. Open Painter. 

b. Select New from the File pull-down menu. 

C. In the dialog box that follows, type 600 (pixels) in the 
Held labeled Width, 600 (pixels) in the field labeled 
Height, and 72. o (pixels per inch) in the field labeled 
Resolution. Click on OK. 
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Ic. 



d. An untitled document will open. 

e. Select the Text tool. 

f . Select Controls from the Window pull-down menu. 

g. In the Controls Text dialog box that follows, select 
Other Font from the Font pop-up menu. 




le. 




If. 



|0 . 






y a(BIIIBO?>M|ftol>MMllOfttOIIM 
a(Dfliioz«MgftoitMMtiaRtoflat t 
XCICA(ll7>Ntgtto«MM(MWtlMI 
t(l(R6ll^>Mi|ito<HMtNmi4Rnl f 
U■(HfcN^•Mg•to4MM(((>mllRI 







Ig. 



222. I Chapter 6 





h. In Ihe Choose Font dialog box that follows, select a font, 
and click on OK. 

i. Once you have selected a font in the Controls Text 
dialog box, use your mouse to move the Font Size slider 
to set the font size to 24 points. 

j. Put the Controls Text dialog box away by clicking on 
the close box with your pointer arrow. 



I 

I t 

Marilynl 

I 





k. With the Text tool still selected, click on the untitled 
document, and type Mari lyn. 

l. As Painter creates individual text shapes in the untitled 
document, each letter will be represented as a separate 
floater in the Objects Floater List as shown. 

m. Click on the Group button in the Objects Floater List. 

n. The list will collapse to one Object Floater labeled 
Group 1 . The object should be shaded, indicating that it 
is selected. 

O. If the Group 1 object in the Object Floater List is not 
selected, click to the right of the object’s name to 
select it in the list. 
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p. Select ObjeclsICreate Drop Shadow from the Effects 
pull-down menu, 

q. In the dialog box that follows, type lo in the field 
labeled X-Offset, 15 in the field labeled Y-Offset, and 45 
in the field labeled Opacity. Click on OK. 
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2. Save your image. 

a. Select Save As from the File pull-down menu. 

b. In the dialog box that follows, select GIF from the Type 
pop-up menu. 



C. Type a name in the field labeled Save Image As, and 






lOCoMt^l 






I^COINI.UI J 


2 [ IjrrI 1 




3tDisi.nr 








1 Ottklap 1 






_ ( ^Pr Cl ] 




tM. Intof t ■%: 


1 C.M.I ) 




3 J »*.a J 




lypt^ fall v| 




□ iin<cim>rrk«rd □ \a»r M.ia 



224. Chapter 6 



A 


Iht ll.olrit 1. Ihi» itneqt .rr 
nierq.d u>ilh U« cwiit.t Uqrr 
u*hfn %.vlag to IMt l.im.t — 
tau. at Rllf to toua lha 
tanuat and rioalart at 
mdrprnd.nt objetit. 




1 1 



2d. 



d. In Ihe dialog box that follows, click on OK. 

e. In the Save As GIF Options dialog box that follow^s, 
accept the default settings by clicking on OK. 
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3. Create an image with a drop shadow. 

Images saved in a Photoshop layer are automatically treated 
as a floater in Painter. Although Painter has selection tools 
that may be used to create a floater, the selection tools are 
not as easy to use as the comparable tools in Photoshop. 

a. Open Photoshop 

b. Select Open from the File pull-down menu. 

C. Select a graphic in the dialog box that follows, and click 
on Open. 
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d. Your image will open in a Photoshop window. 

e. Select the Magic Wand tool. 

f. Click on the solid background. 

g. The background will be enclosed with “marching ants “ 
indicating that it is selected. 




h. Select Inverse from the Select pull-down menu. 

i. The image will be selected instead of the background. 




3i. 

j. Select Copy from the Edit pull-down menu. 

k. Select Pa.ste Layer from the Edit pull-down menu. 
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I. In ihe dialog box that follows, type a name for the new 
layer, and click on OK. 



4. Save your image. 

a. Select Save As from the File pull-down menu. 

b. In the dialog box that follows, select Photoshop from 
the Format pop-up menu. 

C. Type a name for your image, and click on Save, 
d. In the dialog box that follows, click on Replace. 
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5. Quit Photoshop. 

a. Select Quit from the File pull-down menu. 
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6. Open your image in Painter. 

a. Open Painter 
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b. Select Open from the File pull-down menu. 

C- Select your graphic in the dialog box that follows, and 
click on Open. 

d. Your image will open in a Painter window. 
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7. Enlarge the canvas size in Painter. 

a. Select Canvas Size from the Canvas pull-down menu. 

b. In the dialog box that follows, type lOO following the 
word Add in each of the fields used to increase the 
canvas size. 
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8. Zoom out. 

a. Select the Magnifying Tool. 
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b. Hold down the Option key, and click on the image. 

C. The image will be reduced from 100 percent to 50 
percent. 

9. Select the image in the Heater List. 

a. If the Objects Floater List is not in view, select Objects 
from the Windows pull-down menu. 

b. In the Objects Floater List, click on the image as shown. 
C. A rectangular .selection will appear around the image. 
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10. Create a drop shadow. 

a. Select ObJectsICreate Drop Shadow from the Effects 
pull-down menu. 
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b. In the dialog box that follows, type lo in the field 

labeled X-Offset, J5 in the field labeled Y-Offset, and 45 
in the field labeled Opacity. Click on OK. 

C. A drop shadow will appear. 
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11. Deselect the selection rectangle. 

a. Select Deselect from the Edit pull-down menu. 

b. The selection rectangle will disappear. 
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12. Save your image. 

a. Select Save As from the File pull-down menu. 

b. In the dialog box that follows, select GIF from the Type 
pop-up menu. 

C. Type a name in the field labeled Save Image As, and 
click on Save. 

d. In the dialog box that follows, click on OK. 

e. In the Save As GIF Options dialog box that follows, 
accept the default settings by clicking on OK. 
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Creating a blue 
duotone with 
Photoshop 

Summary: Use Photoshop 's duotone 
presets to create a blue duotone. 
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Discard color information? 
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I n print, a color duotone is a print made from a mono- 
chrome original with a second color added for greater 
detail. The technique is a way to add color to an image with- 
out using full color. For the Web, this means a smaller file 
size and faster downloading. 

1. Discard color from a color original. 

a. Open your image in Photoshop. 

b. Select Grayscale from the Mode pull-down menu. 

c- Click on OK when a dialog appears that asks if you’re 
sure you want to discard the color information. 

2. Select a duotone. 

a. Select Duotone from the Mode pull-down menu. 

b. Select Duotone from the pop-up menu. 

c- Click on Load to load the Photoshop duotone presets. 
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d. Find the Goodies folder inside the Photoshop software 
folder, and click it open. 

e. Click open the Duotone Presets folder. 
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f. Click open the Duotones folder, 
g- Click open the Pan tone Duotone folder. 



2f. 



|Q Duotones ▼ | 




t=)RPS Orlue’“ 

1 ) 

[ Desktop ] 

[ Find... ) 

[ find Dq^tn ) 

[ Cancel ] 

I Open I 



2g. 



h. Mark selected Blue 286. When he applied this by clicking 
on the OK button on the Duotone Options dialog box, he 
decided he wanted the blue to look more saturated. 
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i. To adjust the amount of blue, Mark clicked opened the 
duotone curve. 




Photography 233. 





Image 
Bitmap... 
Grayscale 
s/Duotone... 
IndeHcd Color 



CMYK Color ^ 
Loll Colui 
Multichannel 

loior laoie... 

LMYR Preuieu* 
Gamut liiarnimj I 



3a. 




3c. 



j. By pushing the curv'e up (shown at left) and to the left 
with the mouse, Mark altered the amount of blue in tlie 
duotone. 

k. He reapplied the duotone information by clicking on OK 
in the Duotone options dialog box. 
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3. Save the image as a JPEG. 

a. Choose RGB from the Mode pull-down menu. 

b. Select Save As from the File pull-down menu. 

c. Select JPEG from the Format pop-up menu in the Save 
dialog box. 
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d. Type in a file name, and use a JPEG or JPG extension. 

e. Select an image quality in the dialog box that 
follows. 

4. Create an HTML file to test your image. 

a. Open SinipleText. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Duotone</TITLE> 

</HEAD> 

<B0DY> 

C. Add the image tag. Reference your JPEG image with 
the addition of an <IMG> tag. 

<HTML> 

<HEAD> 

<TITLE>Duotone</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC -"Posterl. jpeg”> 

</B0DY> 

</HTML> 

d. Test the HTML document in Netscape. Open 
Netscape, and then open your document by selecting 
Open File from the File pull-down menu. Make sure 
your JPEG image and your HTML document are in the 
same directory. 
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Creating a 
Super Palette 
with DeBabelizer 

Summary: For 8-bit images (hat you 
plan to put on the same Web page, create 
a Super Palette in DeBabelizer because 
browsers can only read a total of 256 
colors. 






D eBabclizer’s Super Palette feature is designed to cre- 
ate the best palette of 256 colors for a group of images. 
Although Ec|uilibrium didn’t specifically design this feature 
for Web graphics, it helps Web artists find a palette that can 
be used for a group of photos because browsers will only 
read a total of 256 colors per page. (Note: This sample 
demonstrates how to manually create a Super Palette. For 
information on how to use DeBabelizeFs batch mode and 
scripting feature to process several images at once, see the 
steps in the Video chapter. ) 

1. Organize your images. 

a. Create one folder for the images that have not had the 
Super Palette applied. 

b. Create another folder for images that have the Super 
Palette applied, and invent a naming convention that will 
remind you that the Super Palette has been applied. 
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2. Initialize the Super Palette. 

To rescl the Super Palette, select Super Palettellnitialize 
IVom the Palette pull-down menu. 

3. Open the first image. 

a. Select Open from the File pull-down menu, and open the 
fii*st image. 

b. Select Super PalettelFactor In This Picture from the 
Palette pull-down menu. 

4. Create a Super Paiette. 

Select Super PalettelCreatc Super Palette from the Palette 
pull-down menu. 
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5. Name the Super Palette. 

a. Remove the “X” from the box labeled On Creation Of 
Super Palette, Macintize It. 

b. Click on the radio button labeled Call It, and fill in a 
name. 

c. Click on Create It. 
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6. Factor in your other images. 

a. Open each one of the other images that will be part of 
the Super Palette. 

b. Select Super PalettelFactor In This Picture fr om the 
Palette pull-down menu. 

7. Apply your Super Palette. 

a. Open each one of the images to be part of the Super 
Palette. 

b. For each image, select Set Palette & Remap Pixels from 
the Palette pull-down menu. 

c. Select the name of your Super Palette from the pop-up 
menu on the Set Palette & Remap Pixels dialog box. 

d. Click on OK. 

8. Save your images. 

a. Select Save As from the File pull-down menu. 

b. Select GIF or JPEG from the Type pop-up menu. 

c- Locate the folder designated for the completed images. 

d. Click on Save. 
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Chapter 




Artist featured In this 
chapter: 



Kleber Santos is a senior 
graphic designer with 
Straightline International, 
a New York-based Jinn 
specializing in strategic 
marketing communica- 
tions. In addition to print, 
Kleber specializ.es in the 
development of electmnic 
programs and multimedia. 

santos@slinyc.com 



Client-Side 
Image Maps 

Image maps have become an important feature in the Web interface 
allowing users to navigate a Web site by clicking different areas in an 
image. Up until recently, image maps required server transactions. 
The HTML code required to create the image map was difficult to 
write because it needed a reference to the image map script the 
provider had running on his/her Web server. Now, client-side image 
maps work entirely on the client side — or on the browser. 

In this chapter, Kleber Santos sorts out the details related to image 
maps, including finding coordinates for clickable regions in a map file 
and creating a client-side image map HTML file. 



If you’re a Web traveler, you’ve probably used an image map to 
navigate. Image maps are inline images that have special regions 
“mapped” to URLs. Anyone who clicks on one of the predefined 
regions (or hotspots) will be Uiken to the page referenced in the URL. 
Well-known sites with image maps include: Tlie Spot, a Web site of 
episodes (http://www.thespot.com); Sony (http://www.sony.com); 
lUMA or the Internet Underground Music Archive (http://www 
.iuma.com); and HotWired (http://www.hotwired.com). 

If you’re renting space on an Intemet provider’s server, this chapter 
will also lead you through the steps on how to upload your files from 
your studio or office to your provider’s computer. 



A virtual walking 
tour of NY’s World 
Financial Center 



Summary: In this chapter, Kleber 
Santos provides thorough details on the 
steps recjuired to create image maps. 
The first image map was invented by 
Kevin Hughes (kevinh@eit.com) while 
he was Webmaster at Honolulu 
Community College. 




Above: In the World Financial Center, 16 
palm trees, each 45 feet high, line the 
glass-enclosed Winter Garden. 




K leber Santos, a graphic designer with 
Slraightline International in New York 
City, likes to challenge himself with com- 
puter projects to satisfy a curiosity about 
how things work. 

To learn how image maps work, Kleber cre- 
ated a “virtual walking tour” of New York’s 
World Financial Center. Image maps are 
inline images with hotspots. Clicking on a 
hotspot links the user to another document 
with more hotspots. {Note: If you want to 
work on this chapters image map example 
step-by-step, look for Kleber art on the 
companion CD-ROM.) 
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Above: Ann Taylor is one of several 
retail tenants in the World Financial 
Center ( WFC). Created on a landfill 
adjacent to New York 's jlnancial district, 
the WFC contains more than eight mil- 
lion square feet of office, retail, and 
recreational space. 




Above: When a clickable image map 
exists on a Web page, the mouse pointer 
will turn into a hand. 



Client-side vs. server-dependent image maps. 

Client-side image maps are much easier to create than the 
original image-map implementation, which is server-depen- 
dent. The word client refers to the browser. As a result, a 
client-side image map means the browser processes, or 
parses, the map information, remembers the content, and 
links to a URL if a user clicks on an active area. 

The components of Kleber’s map project. 

Although Klcbcr Santos’ studio is relatively close to ECHO 
in New York City, he never had to physically go to the ECHO 
site because he uploaded his project components through a 
dial-up PPP connection. (Note: Although you don 7 have to 
be in the same city as your provider, it is recommended that 
you and your provider be located on the same coast because 
cross-count ly Internet traffic can be unreliable.) To com- 
plete his project, Kleber needed the items shown in the fol- 
lowing table. 

Item Notes 

An image Kleber used Photoshop to create his 

photo montage of the shops and restau- 
rants surrounding the World Financial 
Center’s Winter Garden. This step will 
be familiar to designers. Photoshop is a 
popular image editor. For one of his 
image maps, Kleber needed transparent 
GIF images for silhouetted buttons 
(Sfuzzi). He used the PhotoGlF plug-in 
shareware software from BoxTop soft- 
ware. (Note: PhotoGlF is available on 
the CD-ROM in the back of this book.) 

Space on Kleber’s image map project resides on 

an HTTP ECHO’S Web server in New York City, 

server The services a designer can obtain from 
an Internet provider vary a great deal. 
Minimally, Kleber needed a dial-up PPP 
account, which provided access to the 
Internet and sen'er space. 



242 . Chapter? 




Curtis Eberhardt, 
New York, NY 




Above: A 3D illiisfranon confainin}* 
Shockwa \ 'c mo \ ’/ es. 

Above Right: Curtis* home page at 
fittp:/Av\v\v.new-kewI.cont/curtiscape. 




Above: A GIF animation from Curtis* 
Web site. 




A s an animator, Curtis Eberhardt (CurtisAE@aol.com) 
is very conscious of bit depth and related file sizes. 

He recommends that Web artists reduce bit depth as much 
as possible to maintain a reasonable bandwidth. 

Curtis’ design tips: 

1. GIF Wizard at http:/Avw\v.raspberryhill.com/ 
^ifwizard.html is an online tool that reduces the size 
of your CiIF images either on a Web server or on your 
computer’s hard drive. 

2. Use ono’hit (black and white) cast members in 
Director movies. Instead of importing color cast 
members into a Director movie, colorize one-bit cast 
members on Stage to make very small movies for down- 
loading. 

3. GlFBuilder can be used to create individual GIF 
animation frames. Use the GlFBuilder Grabber Hand 
tool, men'e your art, and save the frame. 





Larry Rosenthal, 
New York, NY 




Above: A VRML onimafion adventure. 

Above Right: Larry* s Starbase C3 page 
at http.V/www. cubeJ. com/starbase. 




L arr>' Rosenthal (larr>T@ cube3.com) is an industrial 
designci; a new media artist, and chairman/lbunderor 
New York’s VRMLSIG. 




Above: A Java-based 3D chat area on 
Lany *s Starba.se site written by Dan 
and Matt O 'Donnell of Cicada Web 
Development (http://www.cicadaweb 
.com). The 3D chat envimnment opens 
in a floating window. The top half is a 
VRML window containing Larry's 3D 
models. (Note: Look for Dan and Matt 
O'Donnell's VRML tips on the com- 
panion CD-ROM in the Windows 
edition. ) 



Larry’s design tips: 

1. When creating VRML models, use 2D models 
whenever possible. Use a plane instead of a box for 
representing walls, Hoors, bird wings, etc. If a VRML 
object is not meant to be examined up close and if your 
modeler can handle polygon-level manipulation, turn a 
solid object into a surface by removing any iinneedcd 
faces. This relieves the renderer from culling faces that 
are redundant or unnecessary. 

2. VRML 3D chat engines may he customized with 
your VRML models. Cicada Web Development and 
Black Sun Interactive have both developed 3D chat 
engines that may be used to create your own chat 
environment. 



3. Web servers need to be 
configured with the 
proper MIME settings 
to display VRML mod- 
els. If you wish to display 
VRML models on your 

site, check with your Internet service provider and 
inquire whether the MIME settings have been set to 
display VRML models. 







Jane Greenbaum, 
New York, NY 




Above and Above Right: Sample pages 
from Jane \s Web site at bttp://memhers 
. aol. com/ifon va rd/image IJitm. 
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J ane Grecnbaum (IForward@aol.com) is a new media 
artist and vice president of the New York Graphic 
Artists’ Guild. 

Jane’s design tips: 

1. Using a Web site to display portfolio samples. If 
you’re using your Web site to display your portfolio, 
keep it organized and simple. 

2. Publish your Web site offline. Consider publishing 
your Web site offline by writing the files to a CD-ROM. 
The CD-ROM may then be mailed or distributed as a 
self-promotion piece. 

3. Web visitors will expect fresh material. Web design- 
ers will be expected to update their Web graphics at 
least once a month. As a result, try to think of w'ays 
to update your images without starting from scratch. 
For example, updating can be accomplished by 
rearranging the art or lloating new objects on the 
same background. 




Frank 

De Crescenzo, 
New York, NY 




Above: A rotating 3D loi>o created as a 
GIF animation. 

Above Right: The Shippers home page. 

http.V/members. aol. com/jlat sticks/ 
splash.html 
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G raphic designer Frank De Crescenzo (frank_ 

decrescenzo@prcnhall.com) designed the Slappers 
Web site for fellow percussionist Billy Amendola, who 
developed the Slappers Hat drumsticks. 

Frank’s design tips: 

1. Client-side image maps are easy to create with 
NetObjects Fusion. No HTML tagging is required 
when you use NetObjects Fusion to create a Web 
site. Download a 30-day trial copy from http://www 
.netobJects.com. 

2. Use a .M.AILTO command to route form data. Avoid 
the use of difficult CGI scripts by using a MAILTO 
command to route form data to an email address. 





Peju Alawusa, 
New York, NY 




Above: Peju *s home petite. 

Right: Peju \s resume page from her Web 
site. 

http://memhers.aol. com/alawusa/intro 
.html 
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G raphic designer Peju Alavvusa (pejii_alawusa 
@prenhall.com) designed her Web site using 
NetObjects Fusion. 

Peju’s design tip: 

1. Avoid HTML tagging. Use NetObjects Fusion to cre- 
ate sophisticated Web pages with forms, frames, image 
maps, and multimedia elements. 





Alex Shamson, 
New York, NY 



Above: The Home Store from Alex's 
Virtual Mail. 

Above Right: Alex Shamson \s home 
page at http://www.vrmill.com. 




Above: A wooden chair in the Home 
Store rotates and has an embedded link 
to another Web page containing manu- 
facturer and price information. 
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I nduslrial designer Alex Shamson (alex@vrmill.com) has 
created a Web site full oflinks to valuable VRML 
re.sources on the Web. Visit his site at http://wwvv.vrmill.com 
for information about browser software, VRML tutorials, 
and updates on the VRML specification. 

Alex’s design tips: 

1 . The rotating millstone at the 
upper-left corner of Alex’s Web 
site is an example of VRML ani- 
mation. Simple animation can be 
added to VRML 1 .0 models using 
a word processor. 



4 ^ 



2. The VRML models on Alex’s site were created with 
Virtus WalkThrough Pro. Virlus WalkThrough Pro is 
an inexpensive 3D visualization tool popular with 
architects and Hollywood directors. The .software is 
available on both the Macintosh and Windows plat- 
forms and can export a VRML 1 .0 model in the form of 
aWRLIlle. 






Marc Thorner, 
New York, NY 




Above and Below: Close-ups of the 
VivoActive digital video stream. 

Right: Marc's Vivo Active page on the 
PGl site at http://www.pgi.net/video 
.litml. 





M arc Thonier (mthorner@pipeline.com) is a digital 
video specialist who is part of New York-based 
Premiere Graphics International. 

Marc’s design tips: 

1- VivoActive Producer software compresses a video file 
into a tiny video stream. Compress your video files into 
video streams at a ratio of 200: 1 using VivoActive 
Producer. A video stream starts playing immediately 
when a page loads into a Web browser. 

2. No extra hardware or software is necessary. 

VivoActive rccjuires no extra hardware or software on the 
Web seiTcr. 

3- Web servers need to be configured with the proper 
MIMK settings to display VivoActive (VIV) tiles. If 
you wish to display VivoActive streaming video mod- 
els on your site, check with your Internet ser\'ice 
provider and inquire whether the MIME settings have 
been set to display VIV files. 






Diana DeLucia 
Design, 

New York, NY 




Above: A sample Web pa ^e from the 
Diana DeLucia Design Web site 
desi}*nedby Frauke Ebin^er and art 
directed by Diana DeLucia. 




D iana DeLucia (ckldnyc@intcrpori.ncl) sees the role of 
the graphic designer changing, and the changes arc 
being driven by technology. As Diana explains, “Today, a 
graphic designer is as much a marketing consultant as an 
artist. A graphic designer who is familiar with the Web is in 
a better position to help a client solve big-picture issues 
than a designer who limits himself/herselfto print." 



Diana's design tips: 

1 . Don’t forget your role as a marketer. Create an incen- 
tive on a Web page for visitors to return. Examples 
include a flow' of updated information and possibly art 
or multimedia files to download. 








2. Web pa^es should be easy to read. Web visitors spend 
very little time reading pages. Make pages easy to read 
for quick scanning. 




Frauke’s design tips: 

1. Work out a schematic before creating pages. Even if 
it's rough, a schematic helps to focus your ideas before 
you start designing Web pages (Figure 1 ). 

2. Watch for improvenienls in HTML. HTML has 
already improved in just a few short months. Watch for 
new developments that will make Web page construc- 
tion easier. 



1 . 





Christina Sun, 
New York, NY 



C hristina Sun (chrissun@interport.net) is an illustrator 
who specializes in watercolor and collage for books, 
magazines, newsletters, posters, and fabric design. 

Christina’s design tips: 

While working with Photoshop, Christina discovered that 
changes she made in a feature known as target gamma had 
a dramatic effect on the detail in her images. She noticed that 
a high (2.2) target gamma made her images look washed out. 
A target gamma of 2.2 is optimal for preparing images for 
transparencies, but too high for preparing images for the Web 
or print. Photoshop artists have the option of using curves to 
compensate for the decreased saturation (see Step 3). 

Gamma is a measure of the amount of neutral midtone 
values displayed in an image. Although target gamma won’t 
be written into the file, the value is significant because it 
will affect the adjustments an artist makes to a file when 
it’s displayed. 

1 . Try to match the target gamma of the output device you 
intend to use. For e.xample, the target gamma of IBM 
PC monitors that display Web graphics is 1 .8, and the 
target gamma of Macintosh monitors that display Web 
graphics is 2.0. 





http://\v\v\\\ ecJumyc. comZ-art/ 
sun _studio/swi_st udio.html 


















3b. 



2 . To control the target gamma settings on the Macintosh, 
use the Knoll control panel that comes with Photoshop; 
for the PC, use the Monitor vSetup dialog box under 
Preferences in Photosliop. 

(minima Meaning 

Low number A naiTow midtone range provides high 

contrast. Although a low target gamma 
will result in dramatic blacks and bril- 
liant whites, it can mean a loss of detail 
in images that need a variation of tones 
(for instance, skin tones). 

High number A target gamma that is too high may 
result in images that look washed out. 

3 . To increase the saturation in an image, use curves in 
Photoshop. Open the Curves dialog box by selecting 
AdjustICurves from the Image pull-down menu. 

Instead of making the entire Image darker by dragging 
the curve in the center, try dragging the handle on the 
curve from its starting point (Figure 3a) to the first 
gridline (Figure 3b). This technique cau.scs darker 
areas to become more saturated, but doesn't affect the 
light areas. 






Gail Garcia, 
New York, NY 




Above: Gails Web catalog pa^e viy/a* 
created for Elaine Arsenault, a handhas 
designer in New York City. 

http://www.echonyc.com/-^art/arsefiault/ 
arsenaidt .htmi 







G raphic designer Gail Garcia (gjgarcia@inicrport.net) 
specializes in product promotion and has a back- 
ground in print. When GaiPs clients approached her about 
designing Web pages, she experimented with software pro- 
grams already familiar to her from her print work. 

Gairs design tips: 

1. Use Quark XPres.s as a layout tool. Use Quark XPress 
to build a layout, saving each page as a separate EPS file. 

2. Open the image in Photoshop. A Quark XPress EPS 
image will open as an EPS Piet Preview image in 
Photoshop 3.0+ on the Macintosh or EPS TIFF Preview 
on the Windows platform. 

3. Reduce the hit depth. If you’re designing splash 
screens, be careful of file size. Reduce the bit depth by 
selecting Indexed Color from the Mode pull-down 
menu. (Note: If you already have Indexed Color select^ 
ed, select RGB, and reselect Indexed Color. Experiment 
with smaller hit depths for smaller file sizes.) 





Brandee 
Amber Seick, 
Santa Cruz, CA 




Above and Above Right: Brandee s sam- 
ple Web pages from the WMA site. Many 
of the !UMA pages provide Web visitors 
with a scrolling database window that 
they can use to access artists or labels. 




B randee Amber Selck’s artwork is one of the most popu- 
lar Web sites on the Internet. The lUMA (Internet 
Underground Music Archive) site at http:/Avww. iuma.com is 
a home for over 500 independent, unsigned artists who want 
to reach people directly on the Internet. 




% 



Above: All of the Web graphics on the 
lUMA site have a 50s theme. 



Brandee’s design tip: 

Brandee (brandee@iuma.com) encourages Web artists to go 
“hog wild'’ with their .scanners. When Brandee and artist 
David Beach began designing for the 
lUMA Web pages, they seavenged for 
everyday items around the office, at 
home, and at thrift stores. Brandee 
explains, “A lot of the best stuff came 
from Beach's parents’ kitchen and junk drawer: a cooking 
pot with a copper bottom, tin foil, a gas stove dial, a radio 
knob from a reproduction radio that David bought his dad at 
K Marl when he was a kid, and various knobs from an old 
Zenith television.” 






Shankweiler 
Nestor Design, 
New York, NY 




Above: A sample Web page from a 
Shankweiler Nestor Web site, art directed 
by Okey Nestor and designed by Lindsey 
Payne. 

http:/ I \v\ v\ v.echonyc .com/^art/N estori 
Okey.html 




O key Nestor (okey@iiUerpoit.net), who taught corporate 
identity at Kent Stale University and owns Shankweiler 
Nestor Design in New York City, feels Web graphics offer a 
graphic designer broad new potentials in communication, 
with characteristics such as sound, video, and animation. 

Okey’s design tips: 

1. Integrate your Web site into your corporate identity 
program. Instead of treating your Web site as a totally 
different entity, integrate it into your identity program 
and make it work with the goals and strategies of your 
company’s marketing plans. 

2. Offer compelling content within your design. Design 
is not the only part of the story. The Web is an interac- 
tive medium, .so exploit the potential by offering your 
customers the ability to place orders, pose questions, or 
look up information in a database. Be creative with both 
design and content. 




Merry Esparza, 
New York, NY 






Above: Sample ijiia^qes from the Mohiiis 
Gallery Web site. 

hnp://\vww.users. interport. net/'-merry/ 
mohius.html 




F or her work on Web pages. Merry Esparza (merry 

@ interport. net) uses Photoshop and Illustrator. Because 
these two programs have different properties, she likes to 
transfer graphics from one program to the other. 

Merry’s design tips: 

1 - Begin an illustration with a black and white line art 
drawing in Illustrator and import it into Photoshop, 

2 . Once the drawing is in Photoshop, create channels for all 
the distinct areas in your drawing. Do this before apply- 
ing any color or textures. Channels provide a means to 
record selection areas and, with the various areas record- 
ed, an artist can easily reselect an area and experiment 
with color (and textures) over and over. 

For example. Merry created the tiled floor in the Mobius 
Gallery splash screen (Figure 2) with straight lines in 
Illustrator. When she imported her black and white line 
art drawing into Photoshop, she used the Magic Wand 
tool with the Shift key held down to select the tiles she 
wanted to fill with color. She made a channel to record 
the selection and then experimented with color fills. 









Kleber Santos, 
New York, NY 




Above: Kleber s Sfuzzi Web pti^e was 
created for his virtual tour of the World 
Financial Center. 





The World Financial Center Virtual Tour 



Mtoci maivunaiemntne oi tdb uiov* uz»(e o (o on a vmau io 
KMOai tfsaos' c-MAii. aodieu: aytnt?3<y»cfioay: com 



G raphic designer Kleber Santos (santos@slinyc.com) 
recommends lhat Web designers watch the HTML 3.2 
draft at http://www.w3.org/hypertext/WWW to keep up with 
changes in the Hypertext Markup Language. 

Kleber’s design tips: 

1. To conserve bandwidth, consider black and 
white images. For his virtual tour of the World 
Financial Center, Kleber used black and white images 
instead of color. Because some of his images are large, 
black and white means smaller file sizes. 

2. Use Adobe Illustrator to create type, rasterize it in 
Photoshop, and save it as a GIF or JPEG. Because 
i n’MLdoes not provide a large variation in type faces. 
Illustrator is the best tool to create original type. Save 
the file as EPS, open it in Photoshop, and save the type 
as a GIF or JPEG file. 







Above: Outside view of the World 
Financial Cen ter designed by Cesar 
Pain & Associates and built in J98I. 




Above: The North Cove Harbor Marina 
is tucked behind the World Financial 
Center along the Hudson Riverfront. 



A text A text processor is required to build Web 
processor pages. On the Macintosh, SimpleText 
(which comes with the Mac) is a good 
choice because it automatically saves files 
in the required ASCII format. (Note: See 
Creating a client-side image map 
HTML file later in this chapter. ) 

A brow.ser Browser software is used to view the 
Web and is also a tool that can be used 
locally (without a modem connection) to 
view Web pages throughout the design 
process. Web documents are ASCII text 
files that can be opened by selecting 
Open File from the File pull-down menu. 



Software 
to transfer 
files over a 
modem 



Fetch is a popular Macintosh FTP 
software program used to transfer files 
over the Internet. Although files can also 
be transferred to your provider’s server 
with popular communications programs, 
such as White Knight or MicroPhone, 
Fetch is useful because it has functions 
that allow you to create directories and 
delete files. 
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Finding 

coordinates for 
ciickabie regions 
with Photoshop 

Summary: Photoshop *s Info palette can 
he used to find coordinates for your map 
file. 




Adobe 

Photoshop 



1. Plan the hotspot areas. 

The hotspots on Kleber's image map are restaurant and retail 
store logos (Figure 1). Although image maps can have click- 
able regions shaped as circles, polygons, rectangles, or 
points, Kleber decided to use rectangular areas to cover the 
various store and restaurant names. 

Photoshop’s Info palette shows the coordinate position of 
the mouse pointer (measured from the upper-left comer of 
the image). Kleber recorded the palette’s readings for a map 
text file. To obtain upper-left and lower-right coordinate read- 
ings for all the restaurant and store logos, he positioned the 
mouse pointer on the upper-left comers and the lower-right 
comers of each of the images. 
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1 . 

2. Open your image map in Photoshop. 

a. Open Photoshop, and select Open from the File 
pull-down menu. 
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b. Select a graphic in the dialog box that follows, and click 
on Open. 
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3d. 



2b. 

3. Open the Info palette. 

a. Select Show Info from the WindowIPalettes pull-down 
menu. 

b. The Info palette will appear as a floating palette in the 
Photoshop work area. Press on the Info palette’s pop-up 
menu, and select Palette Options. 

C- Press on the Mouse Coordinates Ruler Units pop-up 
menu, and select Pixels. Click on OK. 
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info Options 



— First Coior Rpodout - 



0 Shorn First Color Readout 
Mode: I flctual Color ▼ | 



— Second Color Readout - 



0 Shorn Second Color Readout 
Mode: I RGB Color ▼ | 
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d. Select one of the rectangular areas on your image map 
and place the mouse pointer (in the shape of a crosshair) 
in the upper-left comer. 
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3e. 




3g. 
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e. Look at the Info palette, and record the x and y readings 
(in a notebook) as follows: 

x: 210 
y: 257 

f. Place the mouse pointer (in the shape of a crosshair) in 
the lower-right corner. 




3f. 

g. Look at the Info palette and record the x and y readings 
as follows: 

x: 295 
y; 305 

h. You will need to repeat these steps for all of your 
planned hotspots. 

4. Save the image as a GIF. 

a. Select Save a Copy from the File pull-down menu. 

b. Enter a file name for your image, and add GIF as the 
extension. 




4b. 
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Tip: GIF and JPEG images can both be 
used in image maps. Although JPEG 
images cannot be seen by as many 
browsers, the file size is vety small com- 
pared to GIFs. In this example, Kleber's 
montage was 70 K as a GIF and only 
30 K as a JPEG. 



c. Press on the Formal pop-up menu, and select 
CompuServe GIF. Click on Save. 




4c. 
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Creating a 
client-side 
image map 
HTML file 



Summary: Unlike seiyer-dependent 
inui^e maps, which rely on an HTML 
file and a separate map file, client-side 
image maps combine the HTML infor- 
mation and map in one document. 



1. Open SimpleText. 

Use SimpleText or a word processor. If you 
use a word processor, be sure to save the 
document as Text Only. 

2. Create a new HTML document. 

Start a new document with the following markup lags: 

<HTML> 

<HEA0> 

<TITLE>The World Financial Center</TITLE> 
</HEAD> 




SimpleText 



3. Add a <BODY> tag. 

Kleber wanted the browser background color to be while, 
which can be accomplished with a BGCOLOR attribute 
added to the <BODY> tag. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY B6C0L0R-//FFFFFF> 

4. Add a <CENTER> tag. 

To center the remaining elements, Kleber added a 
<CENTER> tag. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY BGC0L0R-//FFFFFF> 

<CENTER> 
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5. Add an image tag for the banner graphic. 

The <IMG> tag contains an SRC parameter that contains 
the name of an image file. In this case, the image is a ban- 
ner graphic at the lop of the page. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY BGC0L0R-/^FFFFFF> 

<CENTER> 

<IMG SRC-”vi rtual .gif”> 

</CENTER> 

6. Add an image tag for the map. 

Add an <IMG> tag with an SRC attribute, a USEMAP 
attribute, and a BORDER=0 attribute. The USEMAP 
attribute indicates a client-side image map. It specifies 
which map to use with the image, followed by a #, 
followed by the name of the map. 

In this example, Kleber’s map image is called WFC.gif. 
This HTML document, which also contains the map infor- 
mation, will be saved as map.hWh and WORLDTRADE is 
the name of the map. BORDER=0 turns off the image 
border. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY BGCOLOR-//FFFFFF> 

<CENTER> 

<IMG SRC-"vi rtual .gif"> 

</CENTER> 

<IMG SRC-"WFC.gif USEMAP-”map. htm//WORLDTRADE'’ 
B0RDER-0> 
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7.Adda<MAP>tag. 

Inside the <MAP> tag, add a NAME attribute, which speci- 
fies the name of the map so that it can be referenced by the 
<IMG> lag. 

After the opening <M AP> lag, add an <AREA> lag specify- 
ing a single clickable area of the image. Inside the <AREA> 
tag, use a SHAPE attribute to give the shape of the area, a 
COORDS attribute to describe an upper-left and a lower- 
right set of coordinates, and an HREF attribute to specify 
where a click in that area should lead. Any number of 
<AREA> tags may be specified. This World Trade Center 
example uses nine <AREA> tags. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY BGCOLOR-Y/FFFFFF> 

<CENTER> 

<IMG SRC-”virtual .gif"> 

</CENTER> 

<IMG SRC-”WFC.gir USEMAP-”map.htm//WORLDTRADE” 
B0RDER-0> 

<MAP NAHE-"WORLDTRADE”> 

<AREA SHAPE-RECT C00RDS-"25.7.127 .84“ 

HREF-''yacht .htm“> 

<AREA SHAPE-RECT C00RDS-"151 .8,217 .84” 

HREF-”art .htm”> 

<AREA SHAPE-RECT C00RDS-”233.6,368.84" 

HREF-”ri ver.htm”> 

<AREA SHAPE-RECT C00RDS-”166. 132.218. 171” 
HREF-”gap.htm”> 

<AREA SHAPE-RECT C00RDS-”22 . 224 , 132 . 246” 
HREF-”river.htm”> 

<AREA SHAPE-RECT C00RDS-”192. 221 .278.270” 
HREF-”sfuzzi.htm”> 



<AREA SHAPE-RECT C00RDS-”16 . 338 . 147 . 388** 
HREF-’'ataylor.htin"> 

<AREA SHAPE-RECT C00RDS-”173, 339 ,235,392” 
HREF-"jdavid.htm”> 

<AREA SHAPE-RECT C00RDS-”266 ,339 . 370 .389” 
HREF-”r1 zzol i . htm”> 

8. Close the <MAP> tag. 

Add a closing </M AP> tag after the last <AREA> tag. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 
</HEAD> 

<B0DY BGC0L0R-//FFFFFF> 

<CENTER> 

<IMG SRC-”virtual .gif”> 

</CENTER> 

<IMG SRC-”WFC.gif" USEMAP-”map. htm//WORLDTRADE” 
B0RDER-0> 

<MAP NAME-”WORLDTRADE”> 

<AREA SHAPE-RECT COORDS-”25 .7 . 127 .84” 
HREF-"yacht .htm”> 

<AREA SHAPE-RECT C00RDS-”151 .8.217.84" 
HREF-”art.htm"> 

<AREA SHAPE-RECT C00RDS-”233.6.368.84” 

HREF-”ri ver.htm”> 

<AREA SHAPE-RECT C00RDS-”166.132.218. 171” 
HREF-”gap.htm”> 

<AREA SHAPE-RECT C00RDS-”22.224.132.246” 
HREF-”river.htm”> 

<AREA SHAPE-RECT C00RDS-”192. 221 .278,270” 
HREF-”sfuzzi .htm”> 

<AREA SHAPE-RECT C00RDS-”16 . 338 . 147 . 388” 
HREF-”ataylor.htm”> 
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<AREA SHAPB-RECT C00R0S-"173.339.235,392’* 
HREF-"jdav1d.htm”> 

<AREA SHAPE-RECT CO0RDS-”266.339.370.389" 
HREF-”r1zzol i .htm"> 

</MAP> 

9. Add line breaks. 

Line breaks add space below the image map graphic. Add 
two line breaks after the closing </MAP> tag. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY BGC0L0R-//FFFFFF> 

<CENTER> 

<IMG SRC-"v1rtual .g1f’*> 

<IMG SRC-"WFC.gif USEMAP-"map. htm//WORLDTRADE" 
BORDER-0> 

<MAP NAME-”WORLDTRADE"> 

<AREA SHAPE-RECT COORDS-”25 . 7 , 127 ,84" 
HREF-"yacht.htm”> 

<AREA SHAPE-RECT C00RDS-"151 .8 . 217 .84” 

HREF-”art . htm”> 

<AREA SHAPE-RECT C00RDS-”233.6.368.84” 

HREF-"ri ver.htm”> 

<AREA SHAPE-RECT C00RDS-”166, 132,218.171” 
HREF-”gap.htm”> 

<AREA SHAPE-RECT C00RDS-”22. 224 . 132.246” 

HREF-”r1 ver.htm”> 

<AREA SHAPE-RECT C00RDS-”192. 221 ,278,270” 
HREF-”sfuzzi . htm”> 

<AREA SHAPE-RECT C00RDS-”16,338, 147 .388” 
HREF-”ataylor .htm”> 

<AREA SHAPE-RECT C00RDS-”173.339,235.392” 
HREF-”jdavid.htm”> 
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Tip: Browsers that support client-side 
image maps include Netscape 2.0 and 
3.0, SpyGlass Mosaic, and Microsoft's 
Internet Explorer. 



<AREA SHAPE-RECT C00RDS-"266.339.370,389” 
HREF-"rizzol i .htm"> 

</MAP> 

<BR> 

<BR> 

10. Add text. 

Kleber added a line of text after the line breaks to give Web 
visitors directions. 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITLE> 

</HEAD> 

<B0DY BGCOLOR-y/FFFFFF> 

<CENTER> 

<IMG SRC-”virtual .gif”> 

<IMG SRC-"WFC.gif’* USEMAP-'’map . htm^^WORLDTRAOE" 
BORDER-0> 

<MAP NAME-”WORLDTRADE”> 

<AREA SHAPE-RECT C00RDS-"25 ,7 . 127 .84” 
HREF-”yacht.htm"> 

<AREA SHAPE-RECT C00RDS-**151 .8,217 .84” 
HREF-”art.htm”> 

<AREA SHAPE-RECT C00RDS-”233 . 6 . 368 . 84” 

HREF-”ri ver.htm”> 

<AREA SHAPE-RECT C00RDS-”166 . 132 . 218 . 171" 

HREF-”gap. htm"> 

<AREA SHAPE-RECT C00RDS-”22 . 224 . 132 . 246” 

HREF-”ri ver.htm”> 

<AREA SHAPE-RECT C00RDS-”192. 221 .278.270” 
HREF-”sfuzzi .htm”> 

<AREA SHAPE-RECT C00RDS-”16 . 338 . 147 . 388” 
HREF-”ataylor.htm”> 
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Tip: Kleber's email address has a 
MAILTO URL added to the HREF 
attribute, which is part of an anchor link. 



E-MAIL address: ksantos@ e^| jtonvc . com 



When a Web visitor clicks on the email 
link with a MAILTO URL, a blank email 
form appears with the address already 
filled out ( Figure 11). 



<AREA SHAPE-RECT C00RDS-”173.339.235.392” 
HREF-*'jdav1d. htm”> 

<AREA SHAPE-RECT COORDS-’*266 ,339 ,370.389*’ 
HREF-”rizzol1 .htm**> 

</MAP> 

<BR> 

<BR> 

Select individual elements of the above image to go 
on a vi rtual tour. 





11 . 



11. Add the signature area. 

Although signature areas generally contain the 
<ADDRESS> tag, Kleber limited the signature area to an 
email address. He added a MAILTO URL to the HREF 
attribute so that viewers get a blank email fonn when they 
click on the email address (Figure 1 1 ). 

<HTML> 

<HEAD> 

<TITLE>The World Financial Center</TITI.F> 

</HEAD> 

<B0DY BGC0L0R-#FFFFFF> 

<CENTER> 

<IMG SRC-”vi rtual .gif**> 

<IMG SRC-"WFC.gif USEMAP-”map. htmi^WORLDTRADE" 
B0RDER-0> 

<HAP NAME-’*WORLDTRADE**> 

<AREA SHAPE-RECT COORDS-"25,7 . 127 .84” 
HREF-”yacht.htm”> 

<AREA SHAPE-RECT C00RDS-**151 .8,217 .84” 
HREF-”art.htm"> 

<AREA SHAPE-RECT C00RDS-”233,6.368.84” 

HREF-”ri ver . htm”> 

<AREA SHAPE-RECT C00RDS-”166 . 132 . 218, 171” 
HREF-”gap.htm”> 

<AREA SHAPE-RECT C00RDS-”22.224.132,246” 
HREF-”river.htm”> 
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<AREA SHAPE-RECT C00RDS-"192.221 .278.270” 
HREF-'*sfuzzi .htm”> 

<AREA SHAPE-RECT C00RDS-”16 . 338 . 147 . 388" 

HREF-"atayl or. htni"> 

<AREA SHAPE-RECT C00RDS-"173.339.235.392" 
HREF-"jdavid.htm"> 

<AREA SHAPE-RECT C00RDS-"266 . 339 . 370 , 389" 
HREF-"rizzol i .htm"> 

</MAP> 

<BR> 

<BR> 

Select individual elements of the above image to go 
on a vi rtual tour. 

<ADDRESS> 

<A HREF-"Mail to: Ksantos@echonyc.com"> 

Ksantos@echonyc . com 

</A> 

12. Add the ending tags. 

</B0DY> 

</HTML> 

13. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect 
the HTML 3.2 specification. 

A tag used to apply boldfacing to text. 

<BR> 

A tag used to add a line break. This tag does not require 
an ending tag. 

<BODY>-.</BODY> 

A tag used to open and close the body of a document. 
This tag uses the BGCOLOR attribute, which adds 
color to a brow.ser page. For example: 

<B0DY BGC0L0R-"//FFFFFF"> 
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<CENTER>. . .</CENTER> 

A tag used to center elements on a page. 

<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<IMG> 

Used to refer to an inline image, this tag uses the SRC 
attribute, which represents the URL 
(location) of the image. For example: 

<IMG SRC-”virtua1 .gif'> 

This tag also uses Uie USEMAP attribute, which indi- 
cates a client-side image map. It specifies which map to 
use with the image, followed by a #, followed by the 
name of the map. For example: 

<IMG SRC-"WFC.g1f USEMAP-”map.htm#WORLDTRADE” 
BORDER-0> 

MAILTO URL 

The MAILTO URL is used in an email link inside the 
signature area of a document. Viewers who click on a 
link containing a MAILTO URL will get a blank email 
form with the address filled out. 

<MAP>...c/MAP> 

A tag used to describe the regions in an image and 
where each region links. 

This tag uses the NAME attribute, which specifies the 
name of the map so that it can be referenced by the 
<IMG> tag. An <AREA> tag is used between the 
<MAP>...</MAP> tags. <AREA> tags .specify a single 



Tip: Look for cm example of a client-side 
image map at http ://w\v\\\mis .neat. ediuw/ 
--biboAab/client _sidejmage_map.html 
and http://www. learned, com/'-apex/ 
imagemap.htmi 



clickable area of the image. This tag uses the SHAPE 
attribute to give the shape of the area, a COORDS 
attribute to describe the coordinates of an area, and an 
HREF attribute to specify where a click in that area 
should lead. 



<TlTLE>...c/TITLE> 

A tag used to describes the title of a document, which 
shows up inside a browser’s title bar. 
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Use PhotoGIF 
with Photoshop 
to create a 
transparent GIF 

Summary: BoxTop Software *s 
PhotoGIF plug-in added to your 
Photoshop folder gives you the ability to 
save transparent GIFs and interlaced 
GIFs. 





PhotoGIF 



W hen a Web visitor clicks on the Sfuzzi logo (top left), 
they branch to another HTML document with its 
own image map. On this page, the button choices are trans- 
parent GIF images, which Kleber created in Photoshop and 
saved using BoxTop Software’s PhotoGIF plug-in. {Note: 
PhotoGIF is a shareware software program available on the 
CD-ROM in the back of this hook.) 
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1. Open a Photoshop image. 

Before opening Photoshop 3.0, Kleber placed 
the PhotoGIF plug-in into the File Formal 
folder inside Photoshop’s plug-in folder. 
{Note: If you' re us inf; Photoshop 2.5, place 
the PhotoGIF plug‘in into Photo.shop\s Plug’ 
in folder. ) 

a. Open Photoshop, and select Open from 
the File pull-down menu. 

b. Select an image from the dialog box, and 
click on Open. 
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c. The image opens in a Photoshop window. 



2. Open the Info palette. 

a. Select Show Info from the WindowIPaletles pull-down 
menu. 

b. The Info palette will appear as a Boating palette in the 
Photoshop work area. 
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3. Test the RGB value of the background color. 

Kleber’s image is a set of oval buttons that float on a green 
background. Because the background will drop out as the 
transparent shade, he chose green because it’s not in the 
image. 



a. Select the Eyedropper tool from Photoshop’s 
Toolbox. 

b. Hold the Eyedropper over the background. 
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3c. 
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c. Note the RGB value in the Info palette. 

d. When the image is saved as a transparent GIF, the green 
background will drop out. 

4. Save the image as a transparent GIF. 

a. With the image open, choose Save As from the File pull- 
down menu. 

b. Select GlF89a from the Format pop-up menu. This is the 
extension for transparent GIFs. 
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c. In the dialog box that follows, enter a file name and 
click on Save. 
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5a, 5b, 5d, 5e. 




5. Make selections in the PhotoGIF dialog box. 

a. In the BoxTop Software dialog box, select the radio 
button next to GIF89a. 

b. Click on the color selection square to choose a transpar- 
ent color. 

c. In the dialog box that follows, choose a color, and click 
OK. (Note: The PhotoGIF plug-in will assume that the 
background color drops out as transparent. The RGB 
value displayed should match the value you tested with 
the Eyedropper tool.) 

d. Click to put an X in the box labeled Interlace Me, Baby! 

e. Click on Yeah Sure. 

f. When the image is loaded into Netscape, the green 
background will be transparent. 
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Use Fetch to 
upload files to 
a provider’s 
server 

Summary: Jim Matthews' Fetch is a 
Macintosh shareware FFP utility that 
can be used to transfer files to and from 
file ser\>crs on the Internet. Look for 
Fetch on the CD-ROM in the back of 
this hook. 



^ ^ Open Connection... I 

Enter host name, user name, and password 
(or choose from (he shortcut menu): 

Host: [uiiuiP.echonyc.com ~ 

User ID: jcIrcuK 



Password: [•••••••• j 

Directory: j j 



Shortcuts: Q 



( Cancel ] | UK j| 



T O use Fetch to transfer files to your provider’s server, 
you’ll need to obtain a host name (the name of the ser\^- 
er), a user ID, and a password. 

1. Open your Internet connection. 

Click on the Open button in the ConfigPPP Control Panel to 
get on the Internet. 

2. Open Fetch. 

Open Fetch by double clicking on the Fetch icon. 

Fetch 

3. Log in to your provider’s server. 

a. In the Open Connection dialog box, enter the host 
name, user ID, password, and directory name you 
obtained from your provider. This step is referred 
to as logging in. Click on OK. 

b. You should be connected to your provider’s server 
quickly. Look closely at Fetch’s principal dialog box 
and notice the word Connected under Status. 




3a. 




c. Notice the name of the directory you 
obtained from your provider over the 
file list window (Figure 3c). 

4. Create a directory. 

a. Select Create New Directory from the Directories pull- 
down menu. 

b. Enter a new directory name in the dialog box that 
follows. 
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5. Upload a text file to your directory. 

a. Click on the Put File button. ^ p„( pj 

b. Use the file list window in the dialog box 

that follows to .select a text file that you would like to 
upload. Click on Open. 
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5c. 




5d. 



5e. 






c. When you select a file, Fetch identifies the file format as 
Text. Notice the pop-up menu in the dialog box 
(Figure 5c). 

d. If you’re uploading map files or HTML files as text, 
only the .MAP and .HTML extensions are important. 
Delete the .TXT extension that Fetch adds to the end of 
the file name (Figure 5d). Click on OK. 

e. Fetch’s dog will run while your file is uploading. 

f- When the file is uploaded, you will see the name 
displayed in the file list window in Fetch’s principal 
dialog box. 
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6c. 




6. Upload a graphic file to your directory. 

a. Click on the Put File button. [ Put File... ^] 

b. Use the file list window in the dialog 

box that follows to select a graphic file that you w'ould 
like to upload. 

c. When you select a file, Fetch identifies the file format as 
MacBinary II (Figure 6c). 

d. It is important that you do not .send a graphic file to a 
Unix server as a MacBinary file. Press on the pop-up 
menu next to Format, and select Raw Data. Click on 
OK. 

e. When the file is uploaded, you will see the name 
displayed in the file list w'indow in Fetch’s principal 
dialog box. 




6o. 
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7b. 



7. Delete a file. 

a. Select a file in Fetch’s principal dialog box. 

b. Select Delete Directory or File from the Remote pull- 
down menu. 

c- Click on Delete in the dialog box that follows to verify 
you want the file deleted. 

8. Exit Fetch. 

a. Click on the Close Connection button in Fetch’s 
principal dialog box. 

b. Select Quit from the File pull down menu. 
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chapter 

Steven McGrew is a 
Senior Pmduction 
Associate at the New 
M edia Center/Un iversity 
of Orefion Computing 
Center. Steve has a B.S. 
fwni the University of 
Oregon in visual design/ 
computer graphics. 

smcgrew(^ Oregon 
.uoregon.edu 




Artist featured in this 
chapter: 

Marc Thorner is a new 
media artis t .specializing 
in 30 animation and 
digital video. 

mthomer@pipeline.com 



Video 

Streaming video is the latest technique for adding a video clip to 
your Web page. Streaming means there’s no waiting for a video file 
to download. The file is instantly transferred for viewing on Power 
Macintosh and Windows 95/NT machines. Of the options available 
on the market, digital video expert Marc Thorner recommends 
VivoActive, which does not require special software or hardware on 
the Web server. 

In this chapter, you’ll learn how to compress a video file using a trial 
copy of VivoActive Producer software and learn facts about Apple’s 
QuickTime Plug-in, which allows you to embed QuickTime movies 
on a Web page. You’ll also learn how Premiere’s Movie Analysis 
Tool can be used to examine movies you download, plus Steven 
McGrew offers tips on capturing and compressing. 



Marc Thorner’s 
tips on using 
VivoActive 
Producer to 
create streaming 
video 

Summary: Download a copy of 
VivoActive Producer to create a com- 
pressed video stream viewable with the 
VivoActive Player Find both software 
programs at http://www.vivoxom. 
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Tip: The film clip image in this section 
was provided by Fabulous Footage at 
http://www. FOOTAGE, net: 2900. 



T ake adviintage of Vivo Software’s trial download to 
experiment with VivoActive Producer software, w'hich 
compresses video at a ratio of 2(X): 1 . Build a streaming video 
file for Web visitoi*s to see with the VivoActive Player. 

1. Open a movie in VivoActive Producer. 

a. Start VivoActive Producer. 

b. The VivoActive software will be displayed, 

c. Select Open Movie from the File pull-down menu. 

d. In the dialog box that follows, select a movie to be 
compressed, and click on Open. 

e. Your movie’s file name wdll appear in a File List in 
the VivoActive Producer window. 
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f. Select Apply IModeni High Motion from the Settings 
pull-down menu. This will apply a data rate and a 
frame rate that is suitable for a modem transfer. 

g- Documentation for VivoActive Producer is in the form 
of a VivoActive Guide. When you install the 
VivoActive software on a Power Macintosh, this 
document gets installed as an Apple Guide, which is 
accessible from the Guide pull-down menu in the 
Macintosh Finder. 



! [6tn»rat# SgUoMon) 
2a. 




2b. 



2. Compress the movie. 

a. Click on the Generate Selection button at the base of 
the VivoActive software window. {Note: The 
Generate Selection button will only be available if 
your movie file name is selected. ) 

b. The software will display the original movie and the 
compressed version while it is being compressed. A 
VIV file will automatically be saved in the folder 
where your movie is located. 

c. Should you decide to generate another compressed 
movie with an alternate setting from the Settings pull- 
down menu, a click on the Generate Selection button 
will display a Save As dialog box. You will need to 
save new movies under a different file name. 



Tip: Follow the directions for using the 
<EMBED> tag in the next section as a 
guide for embedding a VIV file on a Web 
page. 




2c. 




statue .mov statue .viv 

3a. 3b. 



3. Compare file sizes. 

a. The original compressed movie file (compressed with 
Cinepak) is 1.3 MB. 

b. The VIV file following compression in VivoActive is 
48 K. An Intranet High Motion setting produced a 
204 K file. 
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Experiment 
with Apple’s 
QuickTime Plug-in, 
and embed a QT 
movie on a Web 
page 



Summary: Build a page with an 
embedded QuickTime movie viewable 
with Applets QuickTime plug-in. 
Download a copy of the plug-in from 
http:/Avww.quicktime.apple.com. 

Also, look for details on how to config- 
ure your browser to work with the 
plug-in at http:/Avww. quicktime. apple 
. com/sw/browserconfig. h tml. 



Tip: The film clip image on this page 
was provided by Fabulous Footage at 
http:/Avww. FOOTAGE, net: 2900. 




F ollow these steps to experiment with Apple’s QuickTime 
plug-in. Download the .softwcirc, configure your browser, 
and create a Web page with an embedded QuickTime movie. 

1. Download an all-in-one QuickTime bundle. 

a. Visit http://www.quicktime.apple.com, and follow the 
links to Apple’s “Easy Download” for Macintosh. 
One download includes QuickTime 2.5, MoviePlayer 
2.5, and the QuickTime plug-in for Netscape. 

b. (Optional) Download the MPEG Extension 1 .0 for 
the Power Macintosh at the same location. When the 
QuickTime MPEG extension is installed in your 
PowerMacintosh System folder, the MoviePlayer 
application will be able to play MPEG files. 



2. Add the QT plug-in to the Plug-Ins folder. 

Drag the new QuickTime plug-in to the Netscape Plug-Ins 
folder inside the Netscape Navigator folder. You will need 
to re-start the browser for the new plug-in to work, and 
you may need to visit http://www.quicktime.apple 
.com/sw/browserconfig.html for details on how to get 
your brow'ser to recognize the new plug-in. 

3. Embed a QuickTime movie in a Web page. 

QuickTime movies, QuickTime VR Panoramas, and 
MPEG movies may all be embedded in a Web page using 
an <EMBED> tag. 
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Tip: If you do not know the width and 
height of your QuickTime movie, open 
the movie in the MoviePlayer 2.5 appli- 
cation, and select Get Info from the 
Movie pull-down menu. In the dialog 
box that follows, select Size from the 
File pop-up menu. The width and height 
will he displayed. 




a. Open SimpleText. Use SimpleText or your word 
processor. If you use a word processor, be sure to save 
the document as Text only. 

b. Create a new HTML document. Start a new docu- 
ment w'ith the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Sample Movie</TITLE> 

c. Create a body tag, and add color attributes. {Note: 
See the Online Tools chapter for details on how to 
select color for your Web page.) 

<HTML> 

<HEA0> 

<TITLE>Sample Movi e</TITLE> 

<B00Y BGC0L0R-’*#000000”> 

d. Add a <CENTER> tag. The center tag will center 
the QuickTime movie on the page. 

<HTML> 

<HEAD> 

<TITLE>Sample Movi e</TITLE> 

<B0DY BGC0L0R-”//O0000O'’> 

<CENTER> 

e. Add an <EMBED> tag. In this tag, the width and 
height of the embedded QuickTime w'indow is 
defined in pixels. Add 24 pixels to the height of the 
movie for the default CONTROLLER. The width and 
height attributes are required for both QuickTime 
movies and QuickTime VR panoramas. 

Optional attributes include: 

• The CONTROLLER attribute, which may be 
set to TRUE or FALSE. The value controls its 
visibility. TRUE is the default setting for the 
CONTROLLER. 

• The LOOP attribute makes the movie play in a 
loop. Optional values include TRUE, FALSE, or 
PALINDROME, which makes the movie play 
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alternately forwards and backwards. 
PALINDROME should not be used with 
QuickTime VR panoramas. The default value for 
LOOP is FALSE. 

• AUTOPLAY causes the movie to play as soon as 
the plug-in estimates it has enough data to play the 
entire movie. Optional values include TRUE and 
FALSE. The default value for AUTOPLAY is 
FALSE. 

<HTML> 

<HEAD> 

<TITLE>Sample Movi e</TlTLE> 

<B0DY BGCOLOR-"#000000"> 

<CENTER> 

<EMBED SRC-"statue.mov” HEIGHT-144 WIDTH-160 
CONTROLLER-TRUE LOOP-TRUE AUTOPLAY-TRUE> 

f- Add closing tags. 

</CENTER> 

</B0DY> 

</HTML> 

g. Save your document, and test it in Netscape. Save 
your document. Open Netscape, and select Open File 
from the File pull-down menu. In the dialog box that 
follows, select your HTML document, and click on 
Open. Make sure your movie file is in the same direc- 
tor}^ as your HTML document. If you have the 
QuickTime plug-in installed, and you have the 
Netscape hrow.ser configured to identify the plug-in, 
the movie will load and play. {Note: A/ the time of this 
writmg, Apple Computer has not yet finished docu- 
menting and testing the Internet Explorer 3.x browser 
and the QuickTime plug-in.) 
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Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect 
the HTML 3.2 specification. 

A tag used to apply boldfacing to text. 
<BODY>...</BODY> 

A tag used to open and close the body of a document.This 
tag uses the BGCOLOR=“#RRGGBB’' or hexadecimal 
red-green-blue triplet attribute, which adds color to a 
browser page. For example: 

<B0DY BGCOLOR-’V/ffffff”> 

<CENTER>...</CENTER> 

A tag used to center elements on a page. 

<EMBED> 

A tag used to embed elements on a page. In this example, 
the element is a movie file. This tag uses the SRC attribute 
to indicate the source of the movie file. The WIDTH and 
HEIGHT attributes are used to describe the size of the 
movie in pixels with 24 pixels added to the height to 
accomodate the movie controller bar beneath the movie. 
The CONTROLLER attribute controls the visibility of 
the conu*oller and may be set to TRUE or FALSE. The 
LOOP attribute makes the movie play in a loop and may 
be set to TRUE, FALSE, or PALINDROME, which 
makes the movie alternately play forwards and back- 
wards. The AUTOPLAY attribute makes the movie 
begin playing as soon as the plug-in has enough data and 
may be set to TRUE or FALSE. For example: 

<EMBED SRC-"statue.mov" HEIGHT-144 WIDTH-160 
CONTROLLER-TRUE LOOP-TRUE AUTOPLAY-TRUE> 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<TITLE>...</TITLE> 

A tag used to describe the title of a document, which 
shows up inside the browser’s title bar. 



Use Premiere’s 
Movie Anaiysis 
Tooi to iearn 
about data rate 
and compression 
settings 



Summary: Familiarize yourself with the 
performance specs of movies you down- 
load from the Web. 
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A dobe Premiere’s Movie Analysis Tool provides a 

valuable means lo learn about movie specs, including 
average frame rate, data rate, compression 
settings, and audio quality. 

Adobe Premiere’^ 



1. Select the Movie Analysis Tool. 

Select ToolsIMovie Analysis from the File pull-down menu. 



2. Select a movie to analyze. 

Use the file list window in the dialog box to locate the movie 
you would like to analyze. Click on Analyze. 



3. Print the specs. 

Select Print from the File pull-down menu to print the specs. 



Choose 0 file or folder to analyze: 
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2 . 

Tip: The film clip image on this page was 
provided by The Image Bank. Inc., a 
source for still photographs, film footage, 
and illustrations (800-TIB-images). 



The Web is considered “low bandwidth”. 

The World Wide Web is considered a “low-bandwidth” 
application for digital movies, considering that the aver- 
age Web visitor uses a 14.4 Kbps modem to download 
movie files. Compare this to an average hard drive, which 
can transfer data at only 300 Kbps. If you want Web visi- 
tors to download movie files, special attention should be 
given to file size. 

Capture settings. 

Nearly every item in this movie analysis report (except for 
the file name) can be traced back to the capture settings. 
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Analysis of Boy-ice. qt 

Movie: 

File name is "Boy Jce.qf 
File size is 434 ,4K 

Average data rate is 4 1 .9K per second 
It contains 1 video track(s) and 0 audio track(s) 

Video : 

This movie appears to have DROPPED FRAMES. 
There are 20 frames with a duration of 1 / 1 0th. 
There are 60 frames with a duration of 2/15ths. 

Video track 1 : 

Duration is 0 :00 : 1 0 : 1 2 
Average frame rate is 8.07 fps 

Video track 1 contains 1 type(s) of video data 

Video data block **1 : 

Frame Size = 1 60 x 1 20 
Compressor = Cinepak 
Quality = Normal (3 06) 



0 




Analysis of Secret. qt 






Movie: 

File name is "Secret .qt" 

File size is 3.2M 

Average data rate is 76.6K per second 
It contains 1 video track(s) and 1 audio track(s). 

Video: 

There are 431 frames with a duration of 1 /1 0th. 

Video track 1 : 

Duration is 0 :00 :44 .05 
Average frame rate is 10.03 fps 

Video track 1 contains 1 type(s) of video data: 

Video data block : 

Frame Size = 1 60 x 1 20 
Compressor = Cinepak 
Quality = High (4.00) 

Temporal = High (4.00) 

Audio : 

Audio track 1 contains 1 type(s) of audio data : 

Audio data block • 1 : 

Format = 8 bit - Mono 
Rate * 1 1 127 Hz 






The choices you make when you digitize movie data will 
determine a movie's characteristics. Consider the following 
movie characteristics with respect to the World Wide Web: 

Movie spec If the movie is for the Web... 

file size File size will affect the amount of 

time a Web visitor will have to wait 
for a download to be completed. 

To calculate the amount of time it 
will take to download a movie at 
different modem speeds, divide 
the modem speed (14,400 or 
28,800) by 8 because there are 8 
bits to one byte of data in this sit- 
uation. Divide the number that 
represents the size of your movie 
file by this number, then divide 
by 60 (60 seconds per minute). 

This will give the (theoretical) 
number of minutes required to 
download a movie file. 

(Note: When movie data is trans- 
ferred over telephone wire, even 
if a Web visitor has a 28.8 Kbps 
modem, this bandwidth may not 
he available everywhere. Certain 
areas have a maximum hand- 
width of 2.4 Kbps.) 

average data rate Data transfer inside a computer is 
measured in kilobytes per second. 
Because a Web visitor downloads 
movies and then plays them on a 
hard drive, your movie’s data rate 
should not exceed 1 00 to 200 
Kbps, because the data rate of an 
average hard drive is only 300 
Kbps. If the movie data rate is too 
fist, the movie will drop frames. 



274 . 



Chapter 8 



average frame rate When you capture a movie, frame 



frame size 


rate is a fiinclion of the computer's 
processing power or the speed of 
the hard drive depending on 
whether the movie is captured to 
RAM or to the hard drive. Ideally, 
the frame rate should be a function 
of the playback requirement. 
However, download time is an 
important factor when you create 
movie files for the Web, and a 
higher frame rate implies larger 
files. (Note: See Steven McGrew’s 
tips on capturing and compressing.) 

Frame size affects file size, so 
Web movie frame size should be 
limited to 160x120. 


compressor 


QuickTime has seven software 
compressors built in: Animation, 
Cinepak, Component Video, 
Graphics, Photo-JPEG, None, 
and Video. 


audio formal 


Three sound components affect 
sound data rate: 


sample rate 


the number of sound .samples per 
second 


sample size 


8-bit or 16-bit 


number of 
channels 


mono or stereo; choose mono 
because stereo sound can only be 
heard on stereo-capable hardware 
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Steven McGrew’s 
tips on capturing 
and compressing 



Summary: When you *re creating 
movies for the World Wide Web, the 
choices you make during capture and 
compression set the file characteristics. 
Learn about the variables that will affect 
the size and quality of your movies. 

Tip: The film clip image on this page was 
provided by The Image Bank, Inc., a 
.source for still photographs, film footage, 
and illu.strations (800-TlB -images). 




S ieven McGrevv, who is a digital media designer/ani- 
mator at the University of Oregon, offers the following 
advice on capturing and compressing. 



1. Evaluate your material. 

Before you capture a single frame, look at your material and 
think about issues such as frame size. Can the movie be cap- 
tured at 320x240 or is 1 60x 1 20 large enough? Is color neces- 
sary, or will black and while be good enough? 

2. Uncompressed raw data. 

If disk space is not a problem and your capturing hardware 
supports uncompressed capturing, this is the best choice. 
When you start with uncompressed footage, you’ll always 
gel superior results — especially if you post-produce your 
footage in a movie editor program such as Adobe Premiere. 
Compression adds artifacts such as jaggies and blurring, 
which are always compounded by effects, transitions, and 
filters in the editing software. 

3. Post-production blues. 

Limit the post-production process and remove as much 
material from the clip as possible. If the subject doesn’t 
move, cut the frame! 

4. Compression is about compromise. 

For World Wide Web movies, use the lowest possible 
frame rate. You’ll be able to get away with a very low 
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Tip: The MediaCity Web page at 
fiitp://\vww.MediaCity.com/'-en\'eh 
is a good place to sample a variety of 
QuickTime movies. QuickTime VR 
panoramas, and QuickTime sounds that 
have been embedded on the page. 



frame rate if your subject is static or doesn’t move very 
much. Fast action requires a much higher frame rale. 
Because compression involves a tradeoff between frame 
rate and image quality, use a “givc-a-little, take-a-lillle” 
philosophy when determining the final compression 
/frames per second settings. 

5. Selecting a type of compression. 

QuickTime and MPEG are currently the most widely used 
compression standards. QuickTime is easy to use and 
gives good performance. It can include sound and can be 
played on both Macintosh and IBM PCs. Of the software 
compressors built into QuickTime, the Cinepak codec 
(compressor decompressor) is the best. 

MPEG is difficult to use and is not well supported on 
Macs. However, MPEG can produce movies that are sever- 
al times smaller than QuickTime movies. Use MPEG for 
longer movies that do not require audio; this formal gives 
the maximum amount of compression and the best final 
product. 

6. Apple’s new MPEG extension. 

Apple’s QuickTime MPEG extension gets installed in a 
Power Macintosh computer’s System folder and provides 
playback and control of MPEG movies. The MoviePlayer 
application can now be used to play QuickTime, QuickTime 
VR panoramas, and MPEG movies. Although the 
QuickTime MPEG extension provides playback, it does not 
provide a compressor component. 



7. Conclusion. 

When you’re creating a movie for the World Wide Web, 
make it as small as possible. Try to design your material 
around the Web’s bandwidth limitation and be aware of the 
time required to download your movie. 

Each clip should be evaluated .separately to determine the bc.st 
compression method. When in doubt, use QuickTime 
Cinepak. 
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Creating a link to 
a movie on your 
Web page 

Summary: Create HTML links to 
QuickTime movie files. Include the file 
type and file size to help Web visitors 
moke a decision whether to download. 

Tip: The film clip image on this page was 
provided by The Image Bank, Inc., a 
source for still photographs, f bn footage, 
and illustrations (800-TIB-images). 







N ested definition list tags can be used to create a '‘para- 
graph indent” against a background GIF image that 
has been downloaded with the <BODY BACKGROUND> 
tag. To start the type down the page, begin with an <IMG> 
tag that references a small, clear GIF image. 

Try this example, which contains four links to movie files. 



1. Open SimpleText. 

Use SimpleText or a word processor. If you 
use a word processor, be sure to save the 
document as a Text Only file. 

2. Create a new HTML document. 

Start a new document with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>Kids</TITLE> 

</HEAD> 




SimpleText 




multicolor 1 _jdots.gif 



3. Try the <BODY BACKGROUND> tag. 

In this example, the multicolored background was down- 
loaded as a small tile from the Netscape’s Background 
Samples page (http://home.netscape.com/assist/net_sites/ 
bg/backgrounds.html). 

a. Open the tile called multicolor I _dots.gif \n Photoshop 
as a CompuServe GIF image. 
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Define Pattern 



Take Snapshot ^ 



Composite Controls... 



3d. 



b. Select RGB from the Mode pull-down menu. 

c. Choose All from the Select 
pull-down menu. 

d. Choose Define Pattern from 
the Edit pull-down menu. 

e. Open a New document, name 
it multi.gif, and make it 
603x317 pixels and 72 dpi. 

f. Choose Fill from the Edit pull-down menu. Select 
Pattern from the U.se pop-up menu, 100% Opacity, and 
Normal Mode. 

g. To create the “vellum” (to make the type readable 
against a busy background), drag to select an area of the 
background art, and choose Fill from the Edit pull- 
down menu. 





3f. 




3J. 



h. Choose White from the U.se pop-up menu, 50% 
Opacity, and Normal Mode. 

i. Choose Indexed Color from the 
Mode pull-down menu, and click 
on OK. 

j- Choose Save As from the File 
pull-down menu, and select 
CompuServe GIF from the choices 
on the Format pop-up menu. The 
result is shown in Figure 3j. 

k. Refer to this image in the <BODY BACKGROUND> 
tag. 

<HTML> 

<HEAD> 

<TITLE>Kids</TITLE> 

</HEAD> 

<B0DY BACKGROUND-’'multi .gif"> 



I Image 



Bitmap 

Grayscale 

Biiotone 



IndeKed Color. 



s/RGB Color 
CMYK Color 
Lab Color 
Multichannel 



Color Table... 



31. 
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Tip: The MoviePlayer application 
from Apple Computer can now be used 
to play QuickTime movies, QuickTime 
VR panoramas, and MPEG movies. 



4. Start the type down the page. 

To start the type down the page, use the <BR> tag to add line 
breaks. 



<HTML> 



<HEAD> 

<TITLE>Kids</TITLE> 

</HEAD> 

<B0DY BACKGR0UND-**multi.g1f”> 

<BR> 

<BR> 

5. Add a group of nested definition list tags. 

To create the equivalent of a paragraph indent, use the <DL> 
(definition list) tag. In this example, eight opening tags arc 
used, and eight ending tags are used. Adding more than one is 
called nesting the tags. 

<HTML> 

<HEAD> 

<TITLE>Kids</TITLE> 

</HEAD> 

<B0DY BACKGROUND-’'multt .gif*> 

<BR> 

<BR> 

<DL><DL><DL><DL><DL><DL><DLXDL> 

</DL></DL></DL></DL></DL></DL></DLX/DL> 

6. Add a headline between the <DL> tags. 

Once the required number of <DL> tags are in place, add the 
text in between the opening and ending tags. (Note: The 
<H2>...</H2> tag is for headline type.) 

<HTML> 

<HEAD> 

<TITLE>K1ds</TITLE> 

</HEAD> 

<B0DY BACKGROUND-"muUi .g1f’> 

<BR> 

<BR> 

<DLXDLXDLXDLXDLXDLXDLXDLXH2>Videos:</H2X/DLX 

/DLX/DLX/DLX/DLX/DLX/DLX/DL> 

</B0DY> 

</HTML> 
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7. Add a paragraph tag. 

The <P> lag will create a new paragniph. 



<HTML> 

<HEAD> 

<TITLE>Kids</TITLE> 

</HEAD> 

<BODY BACKGROUND-"multi .gir> 

<BR> 

<BR> 

<DL><DL><DL><DL><DL><DL><DL><DL><H2>Videos:</H2XP></ 

DL> 

</DL></DL></DL></DL></DL></DLX/DL> 

</BODY> 

</HTML> 

8. Add the links to movie files. 

Create links to movie files by opening with the link tag <A> in 
conjunction with the HREF attribute, and placing text 
between the opening and closing lags. This text will serve as a 
clickable hotspot on the Web page and can be identified with 
an underline. {Note: End each line with a pantf^niph tag, 
<P>.) 

<HTML> 

<HEAD> 

<TITLE>K1ds</TITLE> 

</HEAD> 

<B0DY BACKGR0UND-*'muU1 .gif> 

<BR> 

<BR> 

<DLXDLXDLXDLXDLXDLXDLXDLXH2>Videos:</H2XP> 

<A HREF-"Chi Idl .mov''>Boy with Ice Cream 1.4 MB. 
Macintosh QT </AXP> 

<A HREF-"Child2.mov”>Little Girl 1.4 MB. Macintosh QT 
</AXP> 

<A HREF-"Child3.mov">Kids with Giraffe 1.4 MB. 

Macintosh QT </AXP> 

<A HREF-”Chi ld4 .mov">Boy and Elephant 1.4 MB. Macintosh 
QT </AXP> 

</DLX/DLX/DLX/DLX/DLX/OLX/DLX/DL> 

</B0DY> 

</HTML> 
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Tip: QuickTime VR panoramas are 
usually much smaller than QuickTime 
movies. 

Eric Chen, the computer scientist who 
developed QuickTime VR at Apple 
Computer, has formed his own company 
called Real Space http://www.rlspace 
.com. 

His Vrstographer Lite is. software that 
can he used to create a 360-degree 
panorama. 



9. Add bolding to the underlined (link) text. 

In this example, the <B> and </B> lags will bold the text that 
visitors will click on. The text will appear underlined and 
boldfaced. 

<HTML> 

<HEAD> 

<TITLE>Kids</TITLE> 

</HEAD> 

<B00Y BACKGROUND-”multi.gif> 

<BR> 

<BR> 

<DL><DL><DL><DL><DL><DL><DL><DL><H2>V1deos:</H2XP> 
<A HREF-"Childl.mov”XB>Boy with Ice Cream 1.4 MB. 
Macintosh QT </BX/AXP> 

<A HREF-"Child2.mov''XB>L1ttle Girl 1.4 MB. Macintosh 
QT </BX/AXP> 

<A HREF-”Child3.mov’'XB>Kids with Giraffe 1.4 MB. 
Macintosh QT </BX/AXP> 

<A HREF-”Chi ld4 .mov”XB>Boy and Elephant 1.4 MB. 
Macintosh QT </BX/AXP> 
</DLX/DLX/DLX/DLX/DLX/OLX/DLX/DL> 

</B0DY> 

</HTML> 
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Tip: One of the best ways to learn how 
to use HTML tags is to view the tags 
used in your favorite pages on the Web. 

To see the HTML tags that make up a 
page, select Source f mm Netscape \s 
View pull-down menu. 

1 


Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<A>...</A> 

Referred to as an anchor, this tag uses the HREF attribute 
to link to an external sound file or anchor. For example: 

<A HREF-"Chi 1 d4 .mov‘'XB>Boy and Elephant 1.4 MB. 
Macintosh QT </BX/A> 

(Note: The movie file name must include the path name if 
the file is located in another directoiy). 

A tag used to apply boldfacing to text. 
<BODY>...</BODY> 

A tag used to open and close the body of a document. 

<BR> 

A lag used to insert a line break. 

<DL>...c/DL> 

The definition list tag is usually used for definitions or 
short paragraphs with no bullets or numbering. In this 
chapter, this tag is nested eight limes to indent the word 
Video at the bottom of each page. For example: 

<DLXOLXDL><DLXDLXDLXDLXDL>Videos</DL> 

</DLX/DLX/DLX/DLX/DLXDLX/DL> 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<IMG> 

Used to refer to an inline image, this tag uses the SRC 
attribute, which repre.sents the URL (location) of the 
image. For example: 

<IMG SRC - "clear. g1f”> 

<TlTLE>...c/TITLE> 

A lag used to describe the title of a document, which 
appears inside a browser’s title bar. 
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Pick the best 
palette for an 
8-bit color 
QuickTime movie 
using 

DeBabelizer’s 
Super Palette, 
and create a 
script to remap 
your movie 



Summary: Use this example to learn 
how to create a Super Palette in 
DeBahelizet; how to use DeBabelizer's 
functions in Batch mode, and how to 
create a script. 




DeBabelizer® 



Tip: The film clip image on this page 
was provided by Fabulous Footage at 
http.V/www.FOOTAGE.net:2900. 




D eBabelizer, by David Thciirer, is a “graphics process- 
ing, manipulation, and translation tool” that can be 
used to alter QuickTime movie palettes. DeBabelizer’s 
unique Super Palette feature is designed to create the best 
palette (of 256 or fewer colors) for a series of images or, in 
this case, frames. 

1. The color tradeoff. 

When a 1 6- or 24-bit movie is played on an 8-bil monitor, the 
Macintosh computer’s Color QuickDraw will do the color 
mapping to approximate a larger color palette. In this case, 
DeBabelizer can be used to create a predictable 8-bit palette. 

Although the custom, 8-bil Super Palette will look belter 
than the approximate 8-bil palette drawn with Color 
QuickDraw, the only codecs that can save an 8-bil palette 
are Animation and None. Both of these compre.ssors create 
much bigger movies than movies compre.ssed with Cinepak, 
a codec that defaults to a 24-bit palette. As a result, you’ll 
need to limit 8-bit QuickTime movies to very few frames to 
keep the file size small. 

2. Creating a Super Palette. 

You can create a Super Palette and manually remap a group 
of images with the new palette, but because a movie has so 
many frames, Greg Marr at Equilibrium recommends using 
DeBabclizer’s Batch and Scripting features to automate the 
job. Try the example in this section to learn how 
DeBabelizer can automate your work. 
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|3E9|Edit Palettp Mist Scripts { 


1 NeiP... 

1 Open... ^0 




Batch ► 


Catalog... 

Compare... 

Enport... 

Saue... 

Saue Simple... 
SlideshoLU... 


Open Channels... 

Require 

Place... 

Place Require 
Reuerl to Original 




Close m 

Sane Rs... 9gS 

Fkpoi t 




Place O' Saue... 

Place Require O' Saue... 


Page Setup ... 

Print ... ^.P 




Ilelete 8€K 




Quit 



4a. 



[ Neill... [ Edit... ) [ Delete ) 
List: ▼] 

4b. 



3. Open DeBabelizer. 

Click open DeBabelizer. 

4. Begin a Super Palette in Batch mode. 

Instead of manually factoring in a movie’s frames as votes 
to form a Super Palette of the best 256 colors, DeBabelizer’s 
Batch feature can be used to open the entire movie and look 
at color in every frame. 

a. Select BatchlSuper Palette from the File pull-down 
menu. 

b- Click on the New button in the Batch Super Palette dia- 
log box. 

c. U.se the file list window in the dialog box that 
follows to find your QuickTime movie. 




4c. 



d. Click on the Append button. 

e. Enter a name for this batch in the box labeled Batch 
List Name, 



(Check Missing l • t 

Batch List Name: 

Statue batch 

4e. 

f. Click on the Save button. 



Video 285. 








5a. 



Initialize Super Palette before starting 



isplaij off 



hor eocn imp 

Stop and luait 

' »oc*or iri Pause for 1 second 
I^Pause for 2 seconds 
Pause for 10 seconds 
Pause for seconds: 



'lOhen all do 

to the palette poiTup menu: 
^Coll it *^The Super Palette* 



O Call It: Super Palette Name 



1 256 [ colors In Super Palette. 

^ Macintize Super Palette. 

@ Oypass uiarnlng mes sages 
U fluto OK in dialogs in [o [seconds 

I DO IT ]|[cancel](Eirit mith settings] (Hci^ 



5b. 



LUhen all done, add Super Palette 
to the palette popup menu: 
OCall it *■ 

0Call it: 

1 256 [ colors in super Palette. 



The Super Palette* 
Statue polettej ^ 






Macintize Super Palette. 



5d. 



@ Bypass luarning mes sages ^ 

□ flu to OK in dialogs in |o [ seconds 

[[ DO IT j|cancel)[EHit mith settings) (Help...) 



r 

5e, 5f. 






Skip this dialog [OPTION ouerrides] 



6al. 



I( >t il 




6c. 



5. Fill in the Batch Super Palette dialog box. 

a. Click to pul an X in the box labeled Initialize Super 
Palette Before Starting, 

b. Select Display Off from the Display pop-up menu. 

c. Click the radio button/box labeled Call It, and fill in 
your own palette name, replacing Super Palette Name, 

d. Click to remove the X in the box labeled Macintize 
Super Palette because the movie will need to be seen on 
IBM PCs (on the Web). 

e. Click to put an X in the box labeled Bypass Warning 
Messages, 

f. Click to remove the X in the box labeled Auto OK In 
Dialogs In 8 Seconds, 

g- Click the DO IT button. (Note: The QuickTime Movie 
Open dialog box will be displayed,) 

6. Poll the frames. 

a. Click to put an X in the box labeled Skip This Dialog at 
the bottom of the QuickTime Movie Open dialog box. 
(See Figures 6a 1 and 6a2.) 

b. Click on the OK button. 

c. DeBabelizer will begin “polling” all the frames in your 
movie to make a choice of the best 256 colors. 



QuickTime Mmilc Open 



FilciMmf ; Stituf.qt 
Fr«n»t;7l 
Units 3780 
SmoMs:6SOO 
Fr*n»s/f#c: 11 270 
Uhi1si^f*o: 800 



Tr«ci:s:1 vidM.OMtfio 
Quality 5393, 093 (ttfnporaO 
Compression : VidM 
160 vide X 120 hi X 16 bits 



Open: Rll Frames 



Current frame ^ 

Current unit" : 1 
Duration units ; 82 

I ficimStnrt ^ 



Ihru Ffid 



f] 



UepToNttKl 




In Open Dialog Preuieui j Play formard once 



Frame Definition: 

•Modui sample {defaulf I 
O 'yot: suniple 

O Medio edit 
O Trade i'di t 

□ Edyi* OK 

□ lc|m>re ocllpo 



ZT 



[ [ Cancel ] [ Help..."] [^Sktp this dialog [OPTION ouerrtdesl 



6a2. 
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7. Create the Super Palette. 

Click on the Create It button in the corner of the Create 
Super Palette dialog box. 



Scripts 


I EKecute 


► 


Neu»... 


Edit... ^ 


► 


Delete 


► 


Eaecute RppleScript... 
Laport HppleScript... 


► 


I match Me 
I stop Recordiiiy... 





8a. 



I Create Super Polette I 



Pictures factored in so fan 71 Colors used so far: 1 1 18 [ Utem 



Create a Super Palette & 
add it to the palette popup menu: 

Number of colors in Super Palette: 

^ On creation of Super Palette, Macintize it. 

O Call it “Tbe Super Palette" 

<$) Coll it: Istatue palette 



] 



Create It ^ ( Cancel ) [ Help... 




Skip this boH nent time 
^ tOPTION cancelsl 



8. Begin remapping by starting a script. 

a. Select New from the Scripts pull-down menu. 

b. With the Edit Script dialog box open, .select Set Palette 
& Remap Pixels from the Palette pull-down menu. 



iMisc Scripts 



SELECT FUNC Palette Info 
Palette 



Options 



Euti'a Functi . 
Name: Q 



Conuert to BCUI/brayscaie > 
Remoue Unused & Ouplicates 



Reduce Colors... 
Change Pinei Repth 



► 



Set Palette 0 Remap Piiiels. 



Background Remoual... 
Macintize Palette 
Sort Palette 
Super Palette 

BG'Ui Ordered Oither 
Merge Palettes... 



'2 O lns«»i before line 
(§> Rppend at end 



[set line Parainetef^ 



Select nil sen 



[ Remoue line 



[ Help. .7 



Cancel 



Saue 



Edit Scr 



SELECT FUNCTIONS FROM MENUS NOILI! 






Set Palette & Remap Pinels... 



8c, 8d. 



c- The function that you selected will appear in the Edit 
Scripts dialog box. A question mark will be visible 
because DeBabelizer does not yet have enough informa- 
tion to process your request. 

d. Double-click on the question mark, and the Set Palette 
& Remap Pixels dialog box will appear. 



Video 287. 







288 . 




8e. 




color ff', 
RbB; 



□ Oo SOI remop to off-limlt colort. 
Click to mark *off*llmlt rolort*. 

( Chock nil ) [lint heck nil] 



Sri Polellc: Slalue palello 



0 Remap piKeli 



8f through 8i. 



e. Select the name yoirve given to your palelle from the 
Set Palette pop-up menu. 

f. Click to pul an X in the box labeled Remap Pixels. 

g. Click to remove the X from the box labeled Dither 
When Remapping. 

h. Click to remove the X in the box labeled Do NOT 
Remap To Off- Limit Colors. 

i. Click on OK. {Note: The question mark has turned into 
an symbol.) 

9. Name and save your script. 

a. Enter a name for your script in the box labeled Name 
at the bottom of the Edit Script dialog box. 

b. Click on Save. 



Name: [Ttotue script 






I II I 



9a, 9b. 



■iTW tdtt Palette Misc Scnpt^ 


rNni... nn' 

\ Open... 9^0 


Batch > 


Catalog... | 

Cuiiipm u... 

Enport... 


Open Channels... 

Require 

Plate... 

Place lit quire 
Reuet t to Original 


Sane... [ 


Sane Simple...'^ 
SlideshuLP... 
Super Palette... 


Close $SIJ 

Sdue Hs... 

Enpoil 


Place O' Saue 
Place Require 0 Saue 


lOal. 



10. Save each frame in Batch mode. 

When QuickTime movies are saved in DeBabelizer, indi- 
vidual frames are appended to the end of a movie. Like the 
polling required for creating a Super Palette, this is another 
job that should be batched. 

a. Select BatchlSave (Figure 8a 1) from the File pull-down 
menu. The dialog box shown in Figure 8a2 will appear. 





Batch Saue ‘ ~ . 


[ Nem... I 1 Edit... I [ Uelete J 


|l or each imiii)p in l ist 


List:] Statue batch 


▼ 


• Do Script:| NUIHING ^ 


0 Statue.qt 




• Display: | Display off '•’j 

• Saue: | Ruto Naming Options... 

^ Tn* iTof 1 ^ 

{g) 10. 1 61 F«vw 

OTo: Folder image came from 

OTo: Manually splnrl 

Type: | PICT2 ▼[normal 

Color$:| 2S6 (n liiisj ▼j□Rulose1 

□ (Slice... 1 ^ Uerifu replace 

1 I f^Arliit*ci Pmiiioiii 1 1 m >1 /t /I / # 1 1 Cl 


Open | RLE 


▼ 


1 1 r IL lUI 1 ? I llrUII;U.’ 1 1 1 IIIKIUU * 1 Hr 

□ Picture Icon Ql anlma1uin'*fiip 


O Require 


yr 


□ Bypass luarning messages 


HiitumoUi: 


vr 


□ Ruto OK In dialogs in jo (seconds 


□ Don't go into subfolders 




|[ DO IT ^[Cancel][EHit uMth settings)(llelp... 



10a2. 
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[For each image in List: | 


' Llili^Tlllill 


✓ NOTHING 




• Display: 

• Saue: 

<ji} To: 
OTo: Fol(3 
OTo: Mar 
Type: [~~F 


Bedouin set palette script 
Dither to Stashed Palette 
Dither to Super Palette 
DragOOrop To PICT 
Mask Original uiith Dlpha Channel 
Print Best on 300 DPI BClii Printer 
Print Best on 300 DPI Color Printer 
Print Best on Coior Imagemriter 


Colors: 


Stutue script . | 


□ (Slice... 


Trim to Solid Edges 




□ Picture Preuieiu □ 1 ima<j«/fHe 

□ Picture Icon □! <inlm<itian 'file 


c 



10b. 



b. Select the name of your script from the Do Script pop-up 
menu. 

c. Select Display Off from the Display pop-up menu. 

d. Click on the Auto Naming Options button. 



For each image in List; 

Do Script:] Statue script 



• Display: | Display off 

• Saue: 



fluto Naming Options... > 

APS Debabilizer 

DeBabelizer® 1 .61 Foldt-r 



(5) To: (Set.TTl Debabflizer 



lOc, lOd. 



e. Click on the Original Name and the Extension For Save 
Type radio buttons. (Note: Disregard the extension [fit is 
incorrect: De Babelize r will pH in the correct extension.) 

fm Click to put an X in the box labeled Don 7 Duplicate 
Extension. 





Ruto Namer \ 


Saue Filename » 


O tise this: 






QUse this & add 1 


before .eHtension 


O Use this Tf add 1 


at end 



^ Original name * 

0 Strip .eHtension first 
n Ofifl cell number 
O No eHtension 
O EHtension: |[[||QQ||H 
(i) EHtension for Saue Type: PICT 



) 0 . 



Don't duplicate eHtension 



OK 



^ [ Cancel ) [ Help... ) 



lOe, lOf. 
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11. Set the path. 

DeBabelizer will need to know where it should save the 
new movie. Greg Marr at Equilibrium recommends that the 
movie be saved in a folder other than the folder that con- 
tains the original (to prevent accidental file overwrite). 

a. Click on the Set button on the Batch Save dialog box. 



® Tn« I Co* 1 Drive’” iD^babiiuvr . 
TO*lleill|{DeBabelizer® 1.61 Folder. 

QJo: Folder image came from 
OTo: Manually select 



lla. 



b. Use the file list window in the dialog box that follows 
to select a destination folder. {Note: As an option, ere- 
ate a New Folder to keep your new movie separate 
from your old movie. ) 



Select destination folder: 



|q Mouies ▼ I 



y| Bedouins. qt 
g Girl 

g man-baby 
g Statue. qt 



Ub. 



CD BPS IJriue^^ 
Free: 287885312 



JI 



-C.iaf.l- 






Name of nem folder: 



Stat_neuj| 



( Cancel ) [[ Create jj 



li op*’” )l 



Select "Mouies" 



(i) To* r^t 1 ,V*b Book/McGr*w Hovies 

OTo: Folder image came from 
QTo: Manually select 



11c. 



c. Click on the Select {folder name here) button. {Note: 
DeBabelizer will display the path in small type next to 
the Set button, as shown in Figure 9c. } 
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12. Indicate the file type. 

a. Select QuickTime MovielMovie from the Type pop-up 
menu in the Batch Save dialog box. 




12a. 



Type: [ 
Colors:! 



QuickTime Mo... ▼ 



(QbiH) 



J^uto set 

□ [Slice... I □ Uerify replace 

□ Picture Preuiem □ 1 image/file 

□ Picture Icon □ I animation/file 



□ Bypass marning mes sages 

□ fluto OK in dialogs in |b [seconds 



I DO IT ]|(cancel][EHit mith settings] (Help. 



12b. 



□ (Slice... I □ Uerify replace 

□ Picture Preuiem image/ file 

□ Picture Icon □ I animation/file 



12c. 



E Bypass uiarning mes sages 
U^uto OK in dialogs in |8 [ seconds 




I DO IT j[Concel)[EHlt mith settings] [Help.T^i 



12d, 12e, 12f. 



b. Click to put an X in the box labeled Auto Set. 

C- Click to remove the X in each of the six checkboxes 
beneath the Auto Set box. 

d. Click to pul an X in the box labeled Bypass Warnitig 
Messages. 

e- Click to remove the X in the box labeled Auto OK In 
Dialogs In 8 Seconds. 

f. Click on the DO IT button. 
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13a through 13d. 



; DeBabelizer 

















0 



status q1 
8 of 71 



Original Ctrr«nl 



Vide: 


160 


Hi: 


120 


Color: 


32768 


DPI: 


72 



13e. 



13. Select a compressor. 

The only two codecs that support 256 colors are Animation 
and None. Selecting any other codec will create a 24-bit 
movie, not an 8-bit movie. 

a. Select Animation and Best Depth from the 
Compressor pop-up menus in the Compression 
Settings dialog box. 

b. Use the slider to select a compression quality. 

c. Use the default setting of 1 frame per second and Key 
frame every 100 frames. 

d. Click on OK. 

e. DeBabelizer will display the progress of the batch 
operation in the toolbox window. 

14. Test your movie. 

Click to open your movie. If you have the MoviePlayer or 
some other QuickTime player on your hard drive, the 
movie will begin to play. 
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File conversion: 
Preparing 
QuickTime files 
for Windows 



flatt^nMooV 




O n the Macintosh platform, all files have what are 
called a data fork and a resource fork. These mus 



Double-click on the flatteiiMooV application to open it. 



4. Close the movie. 

Close the movie window by clicking on the close box. 

5. Save the movie. 

When you close the movie window, you wdll be prompted to 
save the movie (wdth the extension .FLAT). Locate the folder 
where you would like the movie saved, and click on Save. 



Is Desktop ^ I cz)HD 



HPS Driue'’^ 


4 


a HD 




Number 10 




D uiM-to-qt-conueiler 




0 chrj.s 




O Fri Mail 





inhere do you luant the [ Cancel ] 



Summary: Use Patrick Hennessey *s 
flattenMooV utility to ^'flatten the 



V->/ called a data fork and a resource fork. These must be 
rolled into one for playback on the Windows platform 
because Windows will not “see” two forks. Patrick 
Hennessey’s flattenMooV is a utility that Hattens a movie. 



forks ” of a Macintosh QuickTime movie 
for playback on the Windows platform. 
Look for flattenMooV on the CD-ROM 
in the hack of this hook. 



1. Open flattenMooV. 



0 LIIDog.moii 
D LilOog.mau copy 
D Little Gill 
D Secret. mpeg 
D Secret. mpg 
IJSecret.qt 

D sei)enth%eol.nioLi copy 
D UnlH MPEG 2.0 Mac Uei slon 0. 1 5 




t [ r|L-ci I 



c=>HPS Orlue'^ 



2. Select a movie. 

Use the file list window to select a movie. 



[ Desktop ] 



± li ll 



[ Cancel ) 



3. Run the movie. 

Run the movie to review it. 




5 . 
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File conversion: 
Converting 
QuickTime files 
to AVI 



Summary: Use the Video for Windows 
Converter (developed by CoSA and Vital 
for Microsoft) to convert QuickTime 
movies to AVI movies. 




v/indovs Compressors 




VfW Converter 

A VI (Audio/Video Interleave) is the Microsoft stan- 
dard for digital video. This standard is also known as 
Video for Windows, although the movie files have an .AVI 
extension. Some Web sites offer QuickTime and AVI movie 
formats to accommodate Web visitors on both the 
Macintosh and IBM platforms; AVI is more common than 
QuickTime on the PC platform. 

Before you convert a QuickTime movie to an AVI movie, 
install the Windows Compres.sors in the Extensions folder 
on your Macintosh. 

1. Install the Windows Compressors. 

a. Drag the Windows Compressors icon on top of your 
closed System folder. 

b. Restart your computer. 



2. Open the VfW converter. 

Click to open the VfW converter utility. 




3a, 3c, 3d. 



3. Use the Video For Windows Converter 
diaiog box. 

a. Click on the Open Source button in the Video For 
Windows Converter dialog box. 

b. Look through the Source Folder window, and click on 
a file to convert. 



|€3 Moulet ^ ] 



Preuleui I 


guttle Girl 

g man-bot>ij.qt 




czanPS Urine'- 








[ I jei 1 J 






[ Deiktop ] 








[ J 


( update ] 






[ Cancel ] 



0 Shnui Piuuleui 



3b. 

c. Click on the Open Destination button to select a destina- 
tion folder for the converted files. Select New Folder if 
you’d like to create a New Folder. 
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d. Click on the Convert button. 



Source File Mome: 

SIjHj* 



Destination file Name : 
ISTRTUEQT.nUI I 



-Uldeo: 

S«uro* l6atlVti«o 




Audio: 

Ito irt Kcre» 




o/Uncomprcstod 




□ Concert riiiUio 




Direct Trnrufer ^ 




[ Sellings... ] 




Frame Rale: [[J' 





pBatcti Formatting - 
Urinq up itialuq 
O tills liiniirtl 



0 



Scan 



OScan lot best format 



[ Cancel ) 



3o. 



Source File Nome: 



Destination File Nome: 



pUldeo: 

S«vc« lb bit VMm 

D>Mt 16 bil Mxrofan VtdM 1 

1 Compressed ▼ | 


No n twzp 

□ CnniiHi 1 Riidlo 


[ Sellings... ] 


f Sellings... ] 


Frame Rato: 





f-BaUh Formatting - 
<$l Rtinq up ilioluq 
O U'e thi^ furiniit 



(T) [ Scon 



OScaii lot best Inimiit 



[ Cancel 



3g. 




Compression Settings 



[ Cancel ) (| OK j) 



4a» 4b, 4c, 4d, 4e. 



e. Click on the Compression Method pop-up menu and 
select Uncompressed, Compressed, or Direct Transfer. 
(Note: You will want to select Compressed if the movie 
is a raw file or if the movie is already compressed with 
a non-IBM-compatible compressor. Select Direct 
Transfer if the movie is already compressed and the 
compressor is available on the IBM computer. ) 

f. Selecting Uncompressed displays a video format pop- 
up menu, which allows you to specify the image depth 
of the converted QuickTime file. Choose 8-, 16-, or 24- 
bit. 

g. Selecting Compressed displays a Settings button. 

Click on this button to display a Compression Settings 
dialog box. 

4. Compression settings. 

a. In the Settings dialog box, display the Compressor pop- 
up menu, and select an IBM-compatible compressor. 

b. Drag the Quality slider to select an image quality. 

c- Fill in a number in the Frame Rate field. 

d. Fill in a number for Key frames. Key frames don’t 
depend on previous frames to be drawn. Higher values 
for the Key frame field make the converted file smaller, 
but performance may suffer. 

e. If the setting is available, specify a low data rate Ibr Web 
movies. Playback will be on a hard drive, so make the 
data rate between 1 00 and 200 Kbps. 

5. Audio options. 

a. If audio is included in the QuickTime movie, the 
Convert Audio checkbox will be available. Click on the 
box to fill in an X if you want audio converted. 

b. Click on the Settings button. 

6. Audio settings. 

a. Select tlie number of channels; either mono or stereo. 
(Note: Stereo will only be heard on .stereo-equipped 
hardware.) 
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b. Select the sample size. (Note: 8-bit samples pmvide a 
range of 256 sound units, and 16-hit samples provide a 
range of 65, 536 sound units.) 

c. Select the frequency. {Note: Frecpwncy is the number of 
audio samples per second. 44. 1 kHz is CD-audio cjuality, 
22.056 kHz isAM-radio quality, and ! 1.025 kHz is voice 
quality. Web developers should consider 1 1.025 for voice 
and 22.056 kHz for music.) 

When you run the Converter, you may 
need to increase the amount of RAM 
assigned to the program by increasing 
the minimum and preferred memory^ val- 
ues in the Finder* s Get Info dialog ho.x. 

Video for Windows interleaves audio 
with every frame of video. When you 
convert a QuickTime file to AVI with the 
Video for Windows Converter, the files 
are not interleaved. The authors suggest 
interleaving the files again with VulEdit. 



Tip: The Animation, Graphics, 

Micro.soft RLE, and None Compressors 
are lossless compression schemes. That 
is, no data is lo.st during compression. In 
contrast, data is thrown away during 
lossy compression. Be careful not to 
apply lossy compression more than 
once. 
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File conversion: 
Converting AVI 
movies to 
QuickTime movies 



Summary: Use the AVI to QuickTime 
utility (developed by Vital and Media 
Vision for Microsoft) to convert AVI 
movies to QuickTime movies. 



9 ^ 

: crr : 

AVI to OT Utility 

T he AVI to QT Utility creates a resource fork so an AVI 
file can be recognized by QuickTime. 

Before you convert a QuickTime movie to an AVI movie, 
install the Windows Compressors in the Extensions folder 
on your Macintosh. 



1. Install the Windows Compressors. 

a. Drag the Windows Compressors icon on top of your 

, . closed System folder, 

v/indows Uornpressors 

b. Restart your computer. 




2. Open the AVI to QT utility. 

Click to open the AVI to QT utility. 

3. Use the Conversion window. 

a. Use the file list window on the left half of the 
Conversion window to find the AVI file you would like 
to convert. 

b. Select the AVI file, and click on the Add button. 



Preuleiu: |€) Li fill 1. 1 U nil tics ▼ | cdHD Files to Conuert: 




File Types: | PC nUI Files ▼ j OK Bytes Selected 

[ ConccI ] ( Fonuert ] 
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c- Click on the Convert button. 
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4. Select a destination folder. 

a. Click on Save Sell-Conlained Movie. 

b. Use the file list window in the next dialog box to select a 
destination folder. 

c. Click on the Choose (folder name here) button to choose 
the folder you’ve selected and to start the conversion. 
(Note: If you selected Save Self-Contained Movie, the 
movie may be opened by a QuickTime movie player such 
as the MoviePlayer ) 
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Chapter 




Artist featured in this 
chapter: 

Tom Cipolla is a writer 
ami pmducer of audio- 
visual educational materi- 
als. In this chapter, he 
teaches how to "hear with 
your mind." 

cipolla @ echonyc. com 




Computer specialist 
featured in this 
chapter: 

Greg Hess, a.k.a, "Red 
Dog, " is a computer 
electronics instructor in 
Lakeland, Florida. The 
home page he created to 
support his Palace site 
opens with a background 
sound created with 
Netscape \s new Live Audio 
HTML .syntax. 

ghe.ss@gte.net 



Sound 



This chapter begins with a tour of some well-known Web sites 
that offer sound. You’ll learn technical tips from the developers 
who created the sites, including Modem Media (Zima), Fry 
Multimedia (Ragu), and Robert Lord (lUMA). Tom Cipolla 
offers tips on selecting sound effects for your images. In this 
chapter, he works with clip sounds to create sound elTects for 
photos from Pacific Coast Software (http ://www.paci 11c- 
coast.com). Using Alberto Ricci’s SoundEffects software (avail- 
able on the CD-ROM in the back of this book), Tom alters, mixes, 
records, and reformats the sampled sound for use on other plat- 
forms. There’s also a how-to section on using SoundApp to convert 
sound file formats (also available on the CD-ROM). 

Now that Netscape’s LiveAudio technology plays WAV, AU, and 
MIDI files, you’ll no longer need a separate helper application to 
play sound. In fact, Greg Hess, a computer electronics instructor, 
demonstrates how to add a MIDI background sound to a Web page 
using Netscape’s new LiveAudio HTML syntax. As electronic 
MIDI music continues to blend with computer technology, it 
makes sense to use this sound fomiat on the Web because MIDI 
files are tiny. If you’ve never worked with MIDI .sound files, you'll 
want to visit Heini Wilhagen’s MIDI home page (http://www.eeb 
.tue.nl/midi/index.html). He has created links to articles and tech 
tips, MIDI sound archives, MIDI software utilities, and special 
interest group links. 





Web sites 
with sound 



Summary: Visit pages with sound to 
gather ideas for your own pages. The 
artists who have created the Web pages 
you .see in this chapter are among the 
first to take advantage of the Web *s 
multimedia characteristic.s. 




Tip: Charles Marelli, the writer who cre- 
ated the Duncan character and 
Duncan \s .sound effects, u.ses clip sound 
effects from a variety of public domain 
sound archives, as well as a sound effects 
CD-ROM. {See Creating sound effects 
with clip media for addresses of public 
sound archives.) Charles al.so creates 
sound effects from scratch using a ! 6-bit 
.sound card and a microphone. 




T he Zinia site, developed by Modem Media in Westport, 
Connecticut, uses sound effects the same way sound 
was once used on radio. Visit http://www.zima.com and 
follow soap-opera-like installments about Duncan, the site’s 
fictional Generation X character. 

Weekly episodes contain inline audio links to sound effects. 
For example, in this segment, Duncan is dropping his date 
off at her door. He swings open an iron gate in front of her 
apartment, and the word swung has an audio link attached. 

A mouse click on the word .swung will automatically play 
the sound of a gate swinging open. 

"Duncan, I had a wonderful time." 

Duncan’s bountiful pool of cliches immediately evaporated. 
"Dm me too." he stammered. 

Duncan swung open the small iron gate in front of her 
apartment. 



Scaighi through him. 




"E>uricwi, I had a vorderfultime." 

Duncan's bouiaiful pool of clicha's immcdiaiely evaporsied. 
"Um^ .... me too/' lie stammered. 

Duncan open the small iron gate in hront of her Apartment 
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At Ihe Zima site, you’ll also find sound files in the “fridge.” 
Click on the Earwacks bowl inside the refrigerator, and 
you’ll visit a page of sound icons with links to AU files for 
Macintosh and Unix or WAV files for Windows, including: 



Tip : Download the latest version of 
Netscape to take advantage of the 
Live Audio technology built into the 
bmwser ( http://home. netscape, com 
/comprod/niirror/index.html). 




Smooch.date.au ( 1 8 K) I date.wav (36 K) 




Batter up! ball.au (21 K) I ball.wav (42 K) 




Ding.elevator.au ( 14 K) I elevator.wav (37 K) 




A slight drizzle... rain.au (23 K) I rain.wav (62 K) 
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“I made a lasagna so 
good the other day, I 
swear it would have 
made Michelangelo cry 
from Joy.” 




Tip: Fry Multimedia records Professor 
Antonio (8 bit at 22 kHz) on a Macintosh 
Quadra 650 using SoundEdit Pro and 
the Plaintalk microphone that Apple pro- 
vides with some newer Macs. 

Using SoundEdit, the Fty team edits the 
sound bites into “right-sized” chunks. 
Files range from 16 K( “ Hotel” ) to 95 K. 
( “I would like a hotel room facing the 
Grand Canal, please.”) They estimate it 
takes about one second to download one 
kilobyte of data over a 14.4 Kbps 
modem. They prefer to hold file sizes 
under 40 K so that visitors never have to 
wait more than 40 seconds for sound to 
download. 

To convert the sounds into AU, WAV, and 
AIFF fde formats, Fty Web site develop- 
ers use SoundApp, a shareware program 
for Macintosh. (SoundApp can be found 
on the CD-ROM in the back of this book. 
Note: SoundApp lists the AU format as 
the “NeXT format.”) 




BROUGHT TO VOU BY VOUR 
FEUOW ‘NET HEADS AT 
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R agu’s Web site (http://www 

.eat.com/index.html), produced by 
Fry Multi media in Ann Arbor, 

Michigan, has a clever theme called 
Mama’s Cucina (or Mama’s kitchen). 

Included are Mama’s Cookbook, Contests, Mama’s Secrets, 
Italian Lessons, Cooking/Pasta Glossaries, Stories Around 
the Family Table, and Mama’s Favorite Places. 

Professor Antonio teaches Italian. A mouse click on the 
appropriate file type (AU, AIFF, or WAV) will play a phrase 
in Italian. The idea for the site came from David Fr>' 
(dfry@frymulti.com) and Michael Clemens. Writer Tom 
Cunniff creates much of the content for the site, and “Professor 
Antonio” is Antonio Antiochia, a software engineer with Fr>' 
Multimedia. 




Travel 

Hotel 

albexgo 

[aiffi ygyUtt] 

"] woiild like a hotel room taciog the Grand Canal, ple&ss " 

Vonei wa cwrieia con Sna vista C«iud Owide. ntt fwoit. 

[aiff I I an) 
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O ne of the most exciting developments on 
Web pages is RealAudio, by Progressive 
Networks, Inc. (http://www.realaiidio.com). 

This interesting new technology allows you to 
simultaneously download and play sound. The Progressive 
Network Web site hosts pages that contain ABC, National 
Public Radio, and Radio Yesteryear radio programs. 




□ neainudio ] 


(MSSKHII-.' . 




! Q 1 


1 


bo \IA 1:4sa (. 

Title: Peter Jennln(|s Journal - 06/(i2/‘J5 

fluthon nee Neivs 

Copyright: 1095 
Status: 



Tip: Visit Netscape's pluf*-in pai*e to 
download a copy of the RealAudio 
pliigdn ( http://home.netscape.com/com- 
prod/products/navigator/versionJ2.0/pl 
ugins/audio-video.html). 



Progressive Networks, Inc. sells RealAudio ser\^er software 
to sites that wish to streaming audio files or realtime 
playback. Web site visitors who have a RealAudio player 
installed will have only a two-second delay compared to the 
longer delays required for AU or WAV files. 
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Tip: Netscape and Internet Explorer hath 
can guess at a Web site \s protocol, which 
means you don ’/ need to type http://. For 
example, try www.iuma.com. 




Netscape: lUHR: Independent Rrtlsis and Band$ 
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T he lUMA site at http://iuma.com (Internet Underground 
Music Archive) is the epitome of organization, 
advanced sound technology, and beautiful graphics. 
Founders Robert Lord and Jeff Patterson are recent computer 
science graduates from the University of California at Santa 
Cruz. Created in 1993, the site is intended for independent, 
unsigned artists who want to reach the estimated 30 million 
people on the Internet. In 1994, lUMA was awarded "‘Best 
of the Web” by Internet book publisher O’Reilly & 
Associates for “contributions that have significantly 
improved the Internet.” 

For musicians, “base ser\dce” on lUM A is $ 1 20 per year and 
includes one song, one logo, two band or other images, up to 
two pages of text, and cross-indexing by artist, song title, 
location, and genre. 

Songs submitted on DAT tape or CD are digitized and com- 
pressed to disk using MPEG2 audio compression tech- 
niques. MPEG (Motion Picture Experts Group) is a high- 
fidelity sound format (cassette quality) that offers better 
compression than AIFF or p-law (pronounced mu law). 

On the Macintosh platform, Web site visitors will need the 
MPEG/CD player application to hear .MP2 files. 

lUMA artists Brandee Amber Selck and David Beach create 
graphics with Macintosh computers, but create sound on 
Silicon Graphics Indys. Upon entering the site, the database 
of over 500 musicians can be viewed in five different ways. 
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A Halo Called Fred 




Abdirazak 




Aboufadel^ Edward 




Action Figures 




ADSR 





2 . 




All c«nr«( 

A C«pp«ll* 

Airl>l«ut 

Blues 

ClASSlCAl 

Cclleqe/irjlle/Lo-ri 




3 . 



Band^ bx Location 




5 . 




1. New arrivals. 

A list of the newest bands on lUMA. 



2. By artist. 

An alphabetical listing of all lUMA bands. 



3. By genre. 

A listing of musical genres or styles. Note that bands may be 
under multiple categories. 



4. By location. 

Bands can be sorted by country, state, and city. 



5. By label (from the lUMA home page). 

Several record labels have their own home page on lUMA. To 
access this section, click on the w'ashing machine pictured on 
the lUMA home page. 
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Exag/jt Jig 650K» v»v 650K, »u 235k 



Tip: When you discover a site you like, 
select Add Bookmark from the Bookmarks 
pull-down menu in Netscape, This will 
record the site address ,so you don V have 
to enter it the next time you want to visit. 
To view the list, select View Bookmarks 
from the Bookmarks pull-down menu. 
Click on the Export button if you want a 
copy of the list. Netscape will create a file, 
which you might email to a friend. 




a 


a miLfler . 






T he Van Halen sound samples (hltp.7/vanhalen.wamer- 
rcrds.com/Balance) are arranged on a beautiful page of 
wallpaper graphics and half buttons, which is the artist’s 
clever scheme to use sound excerpts rather than full songs. 
Visitors have their choice of AIFF (Macintosh), WAV 
(Windows), or AU (Unix) files. 




Enter X-Files on the Yahoo! search page (http://www 
.yahoo.com/search.html) and you’ll get a li.st of several Web 
sites and several newsgroups. Charles McGrew's Web site 
has the best sound (http://www.rutgers.edu/x-filcs.html). 
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Electric Magic 




Tip: Although DigiPhone by Electric 
Magic does not have as high a pwfile as 
the new CoolTalk telephone tool devel- 
oped by Apple Computer, it does not 
recpure as much hardware and software. 
CoolTalk requires a Power Macintosh 
running System 7.5.3 or later. Open 
Transport 1. 1. 1 or later, and QuickTime 
2.5. These components may be down- 
loaded from Apple at http.VAvww 
.quickTime.apple.com/sw/qtmac.html. 




Digiphone For Mac 




D igiPhone (formerly NetPhone), introduced in 1995 by 
Electric Magic (http://www.emagic.com), provides 
realtime voice communication over the Internet on 68030- 
based Macintosh machines and Power Macs. (Note: 
NetPhone was .sold to Third Planet Publishing, makers of 
DigiPhone for the PC.) Apple has introduced an Internet 
telephone tool called CoolTalk, which requires a Power 
Macintosh. 

DigiPhonc allows calls to be made between Macintosh 
Internet users over a minimum 14.4 Kbps phone connection, 
anywhere in the world. As Internet connections become 
more powerful in the next few years, Internet telephones 
could rival conventional phones. 

Electric Magic, the maker of Digi Phone, provides a trial 
version of the software, which can be downloaded from 
their Web site (http://www.emagic.com). The demo is fully 
functional but terminates the call after 90 seconds. 

Andrew Green, the British computer programmer who 
invented DigiPhone, compares the software — which uses a 
modem-based connection to send a maximum of 1 ,800 
bytes of data per second — to telephone-quality speech 
(which consists of 8,(X)0 bytes per .second). To compensate, 
DigiPhone compresses the data before transmitting it over 
the Internet. At the receiving end, DigiPhone decompresses 
the data and sends it to the computer’s speaker. 

Although DigiPhonc pre.scnts an interesting no-charge alter- 
native to U*aditional fee-based long distance calling, 
America’s Carriers Telecommunications Association, 
representing America’s small- to medium-sized carriers, 
have filed a request with the FCC asking for a regulation of 
Internet phone products. Interestingly, the major carriers 
do not want regulation, and GATT (General Agreement of 
Trade and Tariffs) forbids individual governments from 
regulating computer networks. 
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CoolTalk for OS Install 

Tip: Although Apple has tried to make 
CoolTalk a video conferencing tool in 
addition to an Internet telephone took 
their product excludes non-Power Mac 
users. 

CU -See Me from Cornell University 
is a free video conferencing software pro- 
gram for Macintosh/Windows machines 
and is not limited to Power Macintosh 
equipment. The software may he found at 
http://cu-seeme. edu/^GET. Multiple- 
party conferencing is also available with 
Cornell Reflector program ( Unix) or a 
Windows NT Reflector from White Pine 
Software. For more inform at ion, visit 
http://goliath. wpine. com/cu-.seeme. html. 




■r/Aa)l lafla 



C oolTalk for Macintosh (hltp://home. netscapc.com/ 
comprod/products/navigator/version_3.0/communica- 
tion/cooltalk/index.himl) is an Internet telephone tool creat- 
ed by Apple Computer. Versions are available for Windows 
3.1/3.11, Windows 95, Windows NT, and Unix machines. 
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The compact 
MIDI file format 



Summary: MIDI (Musical Instmment 
Digital Intetface) was first developed in 
the 1980s. Although MIDI data trans- 
mission was originally developed for 
hardware sequencers, computer soft- 
ware sequencers and synthesizers have 
expanded MIDI's capabilities. 




Tip: Heini Withagen \s MIDI home 
page at http:/Avww.eeh.tue.nl 
/midi/index.html has links to articles 
and tech tips, MIDI .sound archives, 
MIDI software utilities, and special- 
interest group links. 




N etscape’s new LiveAudio technology plays WAV, 

AU, and MIDI files either through a floating sound 
controller or as background sound. (Note: For details on 
background sounds, see Greg Hess’ tips on adding a back- 
ground sound to your Web page, j 

1. What is MIDI? 

MIDI (Musical Instrument Digital Interface) refers to 
digital information passed between two MIDI-capable 
devices. The infonnalion is created with a music synthe- 
sizer. Although MIDI hardware sequencers predate 
computer-driven MIDI software, the transition to micro- 
computers has provided many more features. For example, 
not only can computers record and replay, but they can 
provide storage, editing capibilities, and elaborate syn- 
chronization, including MTC (MIDI Time Code) and 
SMPTE (Society of Motion Picture and Television 
Engineers). 

2. MIDI file size is ideal for the Web. 

MIDI music has been widely criticized by traditional 
instrumentalists. Some critics have described MIDI as 
having ‘little performance fire or flair, no musically sensi- 
tive timing, and lacking in subtlety.” 

In spite of this type of criticism, the format is ideal for the 
Web. File size is very small, and relative duration of play is 
very long compared to sampled sound. 

File Type File Size Duration 

alVica.mid MIDI 50 K 2 minutes 

seagull.au AU 56 K 11 seconds 
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Set Netscape’s 
Preferences to 
download music 
files 



W hen you click on a sound link in the Netscape 

browser window, Netscape’s new sound controller 
will appear, and the sound will begin to play. If you want 
to save the file to your hard drive, alter the Preferences 
settings. 



Summary: Once you *ve found free-of- 
rights MIDI or sampled sound on the 
Web, you 11 need to adjust Netscape j 
Preferences to make the browser down- 
load a jile and not play it. 
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1. Open Preferences and select Helpers. 

a. Choose Preferences from the Options pull-down 
menu. 

b. In the dialog box that follows, click on the Helpers tab. 




lb. 




2a. 



2. Edit MIDI file type handling. 

a. In the Helpers dialog area, scroll to the LivcAudio 
section. 

b. Click to select the audio/midi file type. 

c. Click on the Edit button. 
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d. In the dialog box ihai follows, select the Save To Disk 
radio button. 

e. Click on Ok. The next time you click on a .sound link in 
the browser window, Netscape will save tlie file to your 
hard drive. 



ir^ 



2e. 



3. Rearrange where your files will be saved. 

a. Choose Preferences from the Options pull-down 
menu to display the General Preferences dialog box. 

b. Click on the Applications tab. 




c- In the dialog box that follows, click on the Browse 
button. 

d. Use the file list window to select a drive or folder where 
you would like Netscape to save your files. 

e. Click on the Select. . . button at the bottom of the dialog 
box to select the drive or folder, and click on OK. 
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Greg Hess’ 
tips on adding a 
background sound 
to a Web page 

Summary: Netscape \s new Live Audio 
HTML syntax added to the <EMBED> 
tag causes the browser to process a 
sound file and deliver it to your com- 
puter as a backgoiind sound. 




Above: A room inside The Castle Red 
Dog. 

Above Right: Greg Hess' The Castle 
Red Dog Web site, which provides sup- 
port for his Palace site, is a virtual chat 
environment comprised of beautiful 3D 
images. To obtain Greg 's Palace site 
address, go to the Palace directory at 
http://mansion.thepalace.com/ 
cgi-biiMirectory.pl and look for '*The 
Castle Red Dog." 




I n this example, Greg Hess uses the <EMBED> tag and 
Netscape’s new LiveAudio HTML syntax to add aback- 
ground MIDI sound to his home page at http://wwvv.geoci- 
ties.com/'-thecastle. (Note: Look for Greg 's MIDI files on 
the companion CD-ROM.) 

1. Open SimpleText. 

Use SimpleText or your word processor. If you use a word 
processor, be sure to save the document as Text Only. 

2. Create a new HTML document. 

Start a new document with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE>The Cast! e</TITLE> 

</HEAD> 

3. Add an <EMBED> tag. 

Use the SRC attribute to indicate the source of your sound 
file, the HIDDEN=‘TRUE” attribute to hide the sound 
controller, the AUTOSTART=“TRUE” attribute to begin 
playing the sound automatically, the VOLUME=“100” 
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Above: A scene from The Castle Red 
Dog palace site. Visitors Jane and Les 
are represented as avatars against a 3D 
scene. Text entered in the Message box 
at the bottom of the screen causes a talk 
balloon to appear over an avatar's 
head. For more information on how to 
download a free palace client program 
or how to create your own palace site, 
visit http://www.thepalace. com. 



attribute to set the sound volume to the maximum level, 
and the LOOP=‘TRUE” attribute to play the sound con- 
tinuously until the Stop button is pressed or the user goes 
to another page. 

<HTML> 

<HEAD> 

<TITLE>The Castl e</TITLE> 

</HEAD> 

<EMBED SRC-'’albinon1 .micT HIDDEN-'’TRUE" 
AUTOSTART-”TRUE'' VOLUME-"100" L00P-”TRUE”> 

4. Add a <BODY> tag. 

Use the BACKGROUND attribute to add a background 
image, the BGCOLOR attribute to add a background 
color, and TEXT, LINK, VLINK, and ALINK attributes to 
add color to body text, link text, visited link text, and 
active link text. {Note: See the Online Tools chapter for 
details on how to locate hexadecimal triplets to add color 
information to these attributes.) 

<HTML> 

<HEAD> 

<TITLE>The Castl e</TITLE> 

</HEAD> 

<EMBED SRC-”albinon1 .mid" HIDDEN-”TRUE" 
AUTOSTART""TRUE" VOLUME-"100" L00P-"TRUE"> 

<B0DY BACKGR0UND-"a052.jpg" BGC0L0R-"y/00B9B9" 
TEXT-’V/FFFFFF" LINK-"#00FF00" VLINK-'V/OIFFFF” 
ALINK-"#EE0000"> 

5. Add centered text. 

<HTML> 

<HEAD> 

<TITLE>The Castl e</TITLE> 
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Above: A room inside The Castle Red 
Dog. 



</HEAD> 

<EMBED SRC»"albinoni .mid” HIDDEN“”TRUE” 
AUTOSTART-”TRUE” V0LUME-”100” LOOP-”TRUE”> 

<BODY BACKGROUND-”a052. jpg” BGC0L0R-”//00B9B9” 
TEXT-”#FFFFFF” LINK-”#OOFFOO” VLINK-”//01FFFF" 
ALINK-”#EEOOOO”> 

<CENTER><BXFONT SIZE-+4>The Castle Red 
Dog</FONT></BX/CENTER> 

6. Add a centered image. 

<HTML> 

<HEAD> 

<TITLE>The Castl e</TITLE> 

</HEAD> 

<EMBED SRC-”albinon1 .mid” HIDOEN-”TRUE” 
AUTOSTART-”TRUE” V0LUME-”10O” LOOP-"TRUE”> 

<BODY BACKGR0UND-”a052.jpg” BGC0L0R-”//00B9B9” 
TEXT-’V/FFFFFF” LINK-'V/OOFFOO” VLINK-”#01FFFF” 
ALINK-”#EE0000”> 

<CENTERXBXFONT SIZE-+4>The Castle Red 
Dog</FONTX/BX/CENTER> 

<CENTERXA HREF-”1 ndex2 . htm”XIMG SRC-”1 othern . gi f” 
BORDER-OX/AX/CENTER> 



7. Add additional centered text. 

<HTML> 

<HEAD> 

<TITLE>The Castl e</TITLE> 

</HEAD> 

<EMBED SRC-”albinoni .mid” HIDDEN“”TRUE” 
AUTOSTART-”TRUE” V0LUME-”100” L00P-”TRUE”> 

<B0DY BACKGR0UND-”a052.jpg” BGC0L0R-”//00B9B9” 
TEXT-”/^FFFFFF” LINK-'V/OOFFOO” VLI NK-”//01 FFFF” 
ALINK-”y/EE0000”> 

<CENTERXBXFONT SIZE-+4>The Castle Red 
Dog</FONTX/BX/CENTER> 
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Above: A room inside The Castle Red 
Dog, 



<CENTERXA HREF-1 ndex2. htmXIMG SRC-”lothem.gir' 
BORDER-OX/AX/CENTER> 

<CENTERXFONT SIZE-+l>Out of the fog of night, comes 
an oasis for the weary. Come and enjoy Castle Red Dog 
- A Palace virtual chat site with no commercial 
interests, just good art, good fun, and good people. 
So if you are ready to enter, click on the Castle and 
head inside to explore the many 
del1ghts.</F0NTX/CENTER> 
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Tip: MIDI Web at http://ww\v\midiweb 
.com has an assortment of MIDI files to 
download. 



8. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<BODY>...</BODY> 

This tag uses the BACKGROUND attribute to add an 
image to the background, and the BGCOLOR, TEXT, 
LINK, VLINK, and ALINK attributes to add color to the 
background and text. (Note: See the Online Tools chapter 
for directions on how to add he.xadecimal triplet values to 
these attributes.) 

<CENTER>...</CENTER> 

A tag used to center an element on a page. 

<EMBED> 

This tag uses the SRC attribute to indicate the source of 
your sound file, the HIDDEN=“TRUE” attribute to hide 
the sound controller, the AUTOSTART='TRUE” 
attribute to begin playing the sound automatically, the 
VOLUME=“100” attribute to set the sound volume to the 
maxium level, and the LOOP=‘TRUE’’ attribute to play 
the sound continuously until the Stop button is pressed or 
the user goes to another page. For exainple: 

<EMBED SRC-"albinoni.mid” HIDDEN-*’TRUE” 
AUTOSTART-*’TRUE" V0LUME-”100" L00P“”TRUE”> 

<HTML>...</HTML> 

A lag used to open and close an HTML document. 
<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<IMG> 

Used to refer to an inline image, this tag uses the SRC 
attribute, which represents the URL (location) of the 
image. For example: 

<IMG SRC - ”lothern.gif”> 

<TITLE>...</riTLE> 

Used under the <HEAD> tag, the <TITLE> lag describes 
the title of a document, which shows up inside a docu- 
ment’s title bar. 
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Creating a link to 
sound files on 
your Web page 



Summary: Create HTML links to A IFF, 
AU (Mac and Unixfj-la\\\ pronounced 
mu law). WAV (Windows), MP2 (MPEG 
audio), RA (RealAudio), and MIDI 
sound files. 



Reload 
Load Images 



Source... 




T he Van Halen Soundbytes page offers AIFF, WAV, 
and AU files for downloading. To see the HTML lags 
that make up a page in Netscape, select Source from the 
View pull-down menu. This is a practical way to learn 
how to use HTML tags. For example, the HTML tags for 
the links to the Van Halen “Amsterdam” .sound bytes 
include: 



<DL><DL><DL><DLXDL> 

<DDXIMG ALT-” Amsterdam” 

WIDTH-118 HEIGHT-50 

SRC-”/ Balance/ a ud i 0 / ba 1 ance-amsterdam.gi f”> 

<BR> 

<DL> 

<DDXF0NT SI2E-2> 

<IMG ALT-”” HIDTH-58 HEIGHT-58 ALIGN- BOTTOM 
SRC-”butt_pl ay .gi f”> <I>Excerpt</ 1> 

<A HREF-”/Balance/sounds/amstrdm.a1ff”>aiff</A> 700k. 
<A HREF-”/Bal ance/sounds/amstrdm.wav”>wav</A> 700k, 

<A HREF-”/Bal ance/sounds/amstrdm.au”>au</A> 250k. 
</DLX/F0NT> 

</DLX/DLX/DLX/DLX/DL> 

<P> 



318 . ' Chapter 9 





Follow these steps to get an understanding of the effect 
these tags have on a Web page: 

1. Open SimpleText. 

Use SimpleText or your word processor. If you use a word 
processor, be sure to save the document as Text Only. 



2. Create a new HTML document. 

Start a new document with the following markup tags: 



<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 
</HEAD> 

<B0DY> 
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3. Try the definition list tag <DL>. 

Add <DL>, followed by the word Excerpt. Add an ending 
</DL> lag . 

<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DL>Excerpt</DL> 

Save this document as Definition List Sample, and open it in 
Netscape. Select Open File from the File pull-down menu to 
view your HTML document. 

4. Try nesting two <DL> tags. 

Add another <DL> and another </DL> tag around the word 
Excerpt, 

<HTML> 

<HEAD> 

<TITLE>Mother Mary : Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DLXDL>Excerpt</DL></DL> 
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5. Try nesting four <DL> tags. 

Add ivvo more <DL> and two more </DL> lags around the 
word Excerpt. 

<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DL><DL><DL><DL>Excerpt</DL></DL></DLX/DL> 

6. Add an inline image. 

Insert an <IMG> tag after the opening definition list lags in 
the form <IMG SRC=“apple.gif’>. The SRC attribute indi- 
cates the file name of the image. (Note: The file name alone, 
without a path name, indicates that the image file is in the 
same directoiy as the HTML document.) 

<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DL><DL><DLXDL> 

<IMG SRC - '*appl e.gif'> 

Excerpt 

</DLX/DLX/DLX/DL> 



7. Add an ALT attribute to the image tag. 

The ALT attribute in an <IMG> tag is an accommodation for 
people with text browsers. In this example, they see the word 
Apple instead of the GIF image. 

<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DLXDLXDLXDL> 

<IMG ALT-”Apple” 

SRC - **appl e.gi f'*> 

Excerpt 

</DLX/DLX/DLX/DL> 
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8. Add an italic tag around Excerpt, 

Add a set of italic tags around the word Excerpt with the pair 
<I> and </I>. 

<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DL><DL><DLX0L> 

<IMG ALT-"Apple" WIDTH -100 HEIGHT - 102 
SRC - "apple. gif’*> 

<I>Excerpt</I> 

</DL></DL></DLX/DL> 

9. Specify the height and width. 

Insert WIDTH = 1 00 and HEIGHT = 1 02 in the <IMG> tag. 
This information may be obtained from the Image Size dia- 
log box in Photoshop. Specifying the HEIGHT and WIDTH 
as attributes of the <IMG> tag speeds the loading of the 
image on the Web page. 

<HTML> 

<HEAD> 

<TITLE>Mother Mary : Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DLXDLXDLXDL> 

<IMG ALT-"Apple" WIDTH - 100 HEIGHT - 102 
SRC - "apple. gif"> 

<I>Excerpt</I> 

</DLX/DLX/DLX/DL> 

10. Add links to sound files. 

Create links to sound files by opening with the link lag <A> 
and the HREF attribute, entering text, and then the closing 
</A> tag. This text serves as the clickable hotspot on the 
Web page and can be identified with an underline. 

<HTML> 

<HEAD> 

<TITLE>Mother Mary :Soundbytes</TITLE> 

</HEAD> 

<B0DY> 

<DLXDLXDLXDL> 
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Tip: Keyboard Magazine’s Web site is a 
great resource for musicians who are 
interested in electronic sound. Visit 
http://www. keyboardmag. com. 



<IMG Insert IMG attributes shown in previous steps 
(see Step 9) 

SRC - "apple. gif’’> 

<I>Excerpt</I> 

<A HREF-"/sounds/"garden.aiff">a1ff</A> 700k, 

<A HREF-"/sounds/"garden.wav">wav</A> 700k. 

<A HREF-"/sounds/"garden .au">au</A> 250k, 

<A HREF-*7sounds/"garden.mp2">mp2</A> 250k, 

<A HREF-"/sounds/"garden.RA">RA</A> 250k. 
</DL></DL></DLX/DL> 



File Format Notes 

AIFF An audio file fonnal used on the 

Macintosh platform. 

WAV An audio file format used on the 

Windows platform. 

AU An audio file format read by Sun 

Sparc, NeXT workstations, and 
Macintosh computers. 

MP2 A hi-fidelity file format used on the 

Macintosh, Windows, and Unix 
platforms. 

MIDI A digital sound file format devel- 

oped in the 1980s that has recently 
become popular on the Web because 
of its small file size and long play 
duration. 

RA An audio file formal developed by 

Progressive Technology, Inc. for 
instant playback ov audio 
streaming. Instant playback is only 
available from servers equipped 
with RealAudio server software, 
although the RA file will do a nor- 
mal download to Macintosh, 
Windows, and Unix machines. 
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Tip: The ultimate handlist at 
http://mv\\\ubicom is the Weh \s largest 
list of music links where a Weh visitor 
can add music links for new hands. 
Browse the site alphahetically. hy genre, 
hy resource (newsgroups, mailing lists, 
FAQJlles, lyrics, guitar tablatures, digi- 
tized songs, or Weh pages), or view the 
complete list. 


11. Summary of HTML tags used in this section. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<A>...c/A> 

Referred to as an anchor, this tag uses the HREF attribute 
to link to an external sound file. For example: 

<A HREF-’7sounds/”garden.aifr>diff</A> 

(Note: The sound file name must include the path name if 
the file is located in another directory. ) 

<BODY>...c/BOI)Y> 

A tag used to open and close the body of a document. 

<DL>...</DL> 

The definition list tag is usually used for definitions or 
short paragraphs with no bullets or numbering. In this 
section, this tag is nested four times to indent the word 
E.xcerpt. For example: 

<DL><DL><DL><DL>Excerpt</DL></DL></DLX/DL> 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<I>. ..</!> 

A tag used to format with italics. 

<IMG> 

Used to refer to an inline image, this lag uses the SRC 
attribute, which represents the URL (location) of the image. 
In this section, the <IMG> lag also uses the WIDTH and 
HEIGHT attributes, which speed up the downloading of the 
image, and the ALT attribute, which accommodates users 
limited to text browsers. For example: 

<IMG ALT-”Apple” WIDTH -100 HEIGHT - 102 
SRC - "apple. g1f> 

<TITLE>...</TITLE> 

Used under the <HEAD> lag, the <TITLE> lag describes 
the title of a document, which shows up inside a docu- 
ment’s title bar. 
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Creating 
sound effects 
with clip media 



Summary: By using free-of- rights clip 
media from public sound archives on 
the Web, you can add sound effects to 
photographic images. 




Tip: Look for sound effects at http: //info 
.fuw.edu.pl/niultimedia/sounds/animals. 



A pplying vvhal he learned when working with an ana- 
log sound medium, Tom Cipolla selected electronic 
images from Pacific Coast Software’s collection of stock 
photography, used Alberto Ricci’s SoundEffects software 
to shape the sound, and converted files to formats for play- 
back on Unix and Windows machines. 



Tip: The images on this page are from 
Pacific Coast Software *s collection of 
stock photography at http://www 
.pacific-coast, com. 



1. Select your photographs. 

When selecting photographs to combine with sound effects, 
look for shots with elements that evoke sounds. Pictures with 
human content offer the greatest range of potential sounds. 

2. How many sounds? 

When sound waves are mixed in an 8-bit environment, there 
seems to be too little infonnation for individual sounds to 
maintain their integrity. Clip sounds from the Web or sound 
effect CD-ROMs are usually 8-bit. Try to limit your selec- 
tion to two sounds unless you start with 16-bit sound. 
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3. ''Listening’’ with your mind. 

Pul yourself in the picture, and try to imagine what you 
would hear. Look for sounds that are strong enough to con- 
vey what’s happening in the photo. You cannot expect to 
hold a viewer’s attention for long — 15 or 20 seconds should 
be the maximum duration for your sound clips. 

4. Compare clip sound format, sample rate, 
and other characteristics. 

SoundMachine can be used to compare sound file character- 
istics such as file formats, number of channels, sample rate 
(Figure 4a), sample size, compression, and total time. 
SoundMachine displays each of these characteristics on the 
Control Panel as the choices are selected (Figure 4b). Tom 
Cipolla noted the following information about the file’s short 
counlr>^aiff and horse.aiff: 

short country.aiff 
Format: AIFF 
Sample Size: 8 bits 
Number of Channels: Stereo 
Total Time: 7 seconds 
Sample Rale: 22.3 kHz 

horse.aiff 
Format: AIFF 
Sample Size: 8 bits 
Number of Channels: Mono 
Total Time: 1 second 
Sample Rate: 22.3 kHz 
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File conversion: 
AU to AIFF or WAV 
to AIFF 

Summary: Use SoimdApp to convert 
AU files to AIFF. {Note: SoundEjfects, 
the sound editor used in the next section, 
will be needed to read AIFF files.) 
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Tip: When converting to AU, use the selec- 
tion called NeXT on the SoundApp pull- 
down menu. 
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T he clip sound files found on numerous sites across 
the Web may need to be converted to a file format 
that your sound editor software can read. For example, 
Windows WAV files can be converted to AIFF with a 
Macintosh sound utility called SoundApp (look for 
SoundApp on the CD-ROM in the back of this book). 
SoundApp can also be used to convert edited files to WAV 
format for Windows visitors and AU for Unix visitors. 

1. Select the file you’d like to convert. 

Open the SoundApp software, and select Convert from the 
File pull-down menu. 

2. Identify the file and format you need. 

Use the convert dialog box to locate the file you need to con- 
vert. Choose the file format you need on the pop-up menu 
beneath the window. 
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3. Select a folder for the new file. 

Either create a new destination folder for the converted fde or 
select the default folder by clicking on Save. 
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Mixing clip music 
with sound effects 
in SoundEffects 



Summary: Use Alberto Ricx i^s 
SoundEffects software to alter and mix 
sounds. 

Tip: Use Adobe Premiere to convert free- 
of-nghts CD sounds to A! FF files. Open a 
new project, import, then open a CD 
sound, and export it as an A IFF file. 
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Tip: The ^'^usic Bakery Sound CD cob 
lection is royalty-free music available 
through a buy-out license. For more 
information, call 800-229-0312. 



T om Cipolla gathered 
a country music clip 
from The Music Bakery *s 
Sound CD, which contains 
a large selection of pro- 
duction-quality music sold 
with a royalty-free buy- 
out license. He also locat- 
ed the sound of a horse 
w'hinneying on a public 
domain archive on the 
Web. The sound sampling rates of the sounds Tom intended 
to mix were 8.8 kHz and 22. 1 kHz. This discrepancy is not 
a problem easily straightened out in SoundEffects because 
Ihe software idcniifies the differences and prompts the user 
about resampling sounds. 

1. Clip a portion of a CD country music file. 

Open a music file in SoundEffects, play the file, and deter- 
mine the duration of the clip you’d like to use. Choose Select 
Exactly from the Selection pull-down menu to open the dia- 
log box shown in Figure 1 . Select minutes from the pop-up 
menu, and type in the number of minutes you’d like selected. 

(Note: Sections of the wave pattern may also be altered with 
the Cut, Copy, and Paste commands. Start by drag-selecting 
a section of the wave pattern, and then use the Cut, Copy, or 
Paste commands.) 

2. Save the music clip. 

Select Save from the File pull-down menu, and save this 
music clip to your hard drive. 
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3. Create more horse sound. 

Open the horse sound in SoundEffecis, select the wave pat- 
tern, copy it, and paste two more wave patterns at the end of 
the existing pattern. 



4. Paste the horse sound into the music file. 

Copy the new horse wave pattern to the clipboard. 0|X3ii tlie 
music file, and paste the horse sound into channel 2. Click on 
Resample when the message in Figure 4a appears. 




Vou are trying to paste a sound sampled at 
8.000 kHz into a sound sampled at 22.050 kHz. 
Oo you liiant me to resample the sound you 
are inserting at 22.050 kHz? 
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(Note: If you need to create a second or third channel, drag 
the channel icon above or below the existing channel, as 
shown in Figure 4b. If you need to delete a channel, drag a 
channel icon to the trash, as shown in Figure 4c. ) 
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5. Resampling. 

According to Alberto Ricci, resampling sound from 8 to 22 
kHz introduces a little distortion. To remove some of the 
distortion, select the wave pattern of the sound that was 
resampled, and then select Low PassIFIR from the 
EffectsIFlRIllR pull-down menu. 



6. Test the sound. 

Click on the Play button to review the sound. 
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7. Amplify the music. 

At this point, the horse’s whinneying sound overwhelms the 
sound of the music. Select the music wave pattern, and select 
Amplify from the Effects pull-down menu. Enter 1 50 io 
increase the .sound of the music. 
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8. Leave two seconds of silence. 

To balance ihc sound a lillle more (so that the horse doesn't 
overwhelm the music), select the horse wave pattern, then 
select Leave Silence from the Edit pull-down menu. Select 
seconds from the pop-up menu (showai in Figure 8a), enter 2, 
and click on OK. The result is shown in Figure 8b. 
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9. Mix the music and the horse sound. 

Start by selecting both channels, then: 

a. Choose Quick Mix from the Effects pull-dow'n menu. 

b. Choose New Document and Mono in the dialog box that 
follow's. Click on OK. 

{Note: When you mix sound the respective im)portions of each 
of the sounds are reduced. For e.xaniple, if you have tfuve chan- 
nels and you mix the first two. then mix the output with a third 

channel, the proportions 
become .25, .25. and. 50. 

If you mix all tluve together, 
the pwportions will he .33, 
.33, and. 33.) 

10. Save the new 
sound file. 

Select Save from the File 
pull-down menu, and name 
the file Music/liorse.aiff. 

9b. 
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Recording and 
mixing sound in 
SoundEffects 

Summary: Use Alberto Ricci*s 
SoundEffects software to record and 
mix sounds. 



O ccasionally, you’ll 
want to record your 
own sound effects when 
clip sounds are not avail- 
able. For the crowd photo, 
Tom used the sound of a 
crowd on a tape cassette 
he had recorded at a sports 
event. Your tape recorder 
can be hooked up to your 
Macintosh with a cable 
that runs from your tape 
recorder’s output jack to the Macintosh microphone Jack. 
You’ll need a 1/8-inch plug on the Macintosh end. You 
should be able to find the proper cable at your local Radio 
Shack store. Buy a cable designed for a mono signal. Even if 
your Macintosh can handle stereo sound, your recording 
should be mono to keep file sizes small. 

1. Open a new sound document. 

Open SoundEffects. Use the default blank sound docu- 
ment or select New from the File pull-down menu. 
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2. Click the Record button. 

Click on the circular red Record button at the 
bottom of the document. (Note: This record button 
does not start the sound recording.) 
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3. The Record dialog box. 

To see more of the record dialog box: 

a. Click on the small triangle to the left of General 
Settings. 

b. Click on Device Settings to make sure the microphone 
is selected as your sound input source. 

C- If your Macintosh can record at 16 bits, select this 
option from the Sampling Size pop-up box. 

d. Set the the Play-Through Volume to Off if you’re using 
a microphone hooked up to your Mac, otherwise feed- 
back will occur. {Note: If yoitr external sound source is 
a CD player, you can turn up the Play-Through Volume 
to hear what is being recorded. } 




3c, 3d. 

4. Click on the Record button. 

When your tape recorder is hooked up to your W 

Macintosh, queue up your tape so that it is ready to 
play. When you’re ready to begin, press Play on your tape 
recorder, and click on the circular record button at the top 
of the dialog box. When you’re happy with the recording, 
click on Save. Figure 4 shows the result of Tom Cipolla’s 
crowd recordings. 
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5. Save the new sound file. 

Select Save from the File pull-down menu, and name this 
file Crovvd.aiff. 

6. Create a new channel for a music sound. 

Tom wanted to mix the sound of the National Anthem he 
found on a sound effects CD with the sound of the crowd. 
To do this, he dragged the existing channel icon to create a 
second channel. 




6 . 

7. Paste a music sound into the crowd file. 

Tom opened the National Anthem file, .selected the wave pat- 
tern, and copied it to the clipboard. He then pasted the music 
sound into channel 2. 

8. Mix the two sounds. 

Start be selecting both channels, then: 

a. Choose Quick Mix from the Effects pull-down menu. 

b. Choose New Document and Mono in the dialog box that 
follows. Click on OK. 

9. Resave the new sound file. 

Select Save from the File pull-down menu, and name this file 
crowd.aiff. 




File optimization: 
Resample and 
downsample sound 
files for playback 
on the Web 

Summary: Take an inventory of file 
sizes, and use downsampling techniques 
to reduce them. 



fter mixing sound for 
Lcach of the pho- 
tographs, Tom Cipolia took 
an account of the file compo- 
nents and total file sizes to 
see whether the files would 
be appropriate for the Web. 
File size is related to dura- 
tion and sampling rate. 
Larger files can be scaled down by resampling, although 
there is a loss of quality. 






File Size 


Characteristics 


Picture: Horse 


music (country) 


330 K 


Stereo, 8-bit, 
22.254 kHz 


horse 


llOK 


Mono, 8-bil, 
22.050 kHz 


Mix 


605 K 


Stereo, 8-bit, 
22.3 kHz 


Picture: Crowd 


crowd 


286 K 


Stereo, 8-bil. 
22.3 kHz 


National Anthem 


100 K 


Mono, 8-bit. 
22.3 kHz 


Mix 


561 K 


Stereo, 8-bit, 
22.3 kHz 


Picture: Cruise Ship 






steamship whistle 


330 K 


Mono, 8-bit, 






22.3 kHz 


Picture: Waterfall 


music (orchestral) 


1276 K 


Stereo, 8-bit, 
22.3 kHz 


waterfall 


33 K 


Stereo, 8-bit, 
22.3 kHz 


Mix 


649 K 


Stereo, 8-bit, 



22.3 kHz 
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Tip: Alberto explains that if you must 
halve the size of a 44 kHz, 16-bit sound, 
it is better to downsample it to 22 kHz, 
16 bits, instead of 44 kHz, 8 bits. 
Depending on how small you need to 
make the file, you could downsample 
both the rate and the size. 

If you downsample a 22 kHz, 16-bit sound 
to 22 kHz, 8 bit, only the Macs with 16-bit 
output ( Power Macs andAV Macs) will 
notice the difference. If you downsample 
the sound to 1 1 kHz, 16 bit, it will sound 
better on the 16-bit Macs, but the 8-bit 
Macs will ''hear'' the sound as if it viY/.y 11 
kHz, 8 bit. 

For music, it is best to keep sound to 
16 bits. However, for speech, 8 bit is 
suitable. 



Alberto Ricci, llie author of SoundEflects, recommends the 
following steps to reduce a sound’s file size: 

1. Remove trailing silence. 

Remove any following silence parts. This often reduces tlie file 
as much as 100 K. 

a. Drag-select the silence in the wave pattern. 

b. Press Delete. 




la. 



2. Resample the sound. 

Downsample 16-bit sounds to 8 bit. 

a. Select the sound wave. 

b. Select Downsample from the EffectslResampling pull- 
down menu. 



3. Mix the channels to a mono sound. 

If stereo sound is not essential, this step will reduce the file 
size. 

a. Select the sound wave. 

b. Choose Quick Mix from the Effects pull-down menu. 

C- Choose New Document and Mono in the dialog box that 
follows. Click on OK. 
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Tip: Look for the commercial release of 
SoimdEffects, which will be called 
SoimdMaker. 



4. Resample to 11 kHz or 8 kHz. 

If the sound still sounds good, resampling to 1 1 kHz or 8 kHz 
will reduce the file size. 

a. Select the sound wave. 

b. Select Resample from the EffectsIResampling pull-down 
menu. 

c. Select 1 1 127.27 from the popup menu, or enter 8. Click 
on OK. 

After trailing silence was removed, stereo sounds were mixed 
as mono, and the sounds were resampled to 1 1 kHz, the result- 
ing sounds were substantially smaller. To reduce the sounds 
even further would require shortening the sound duration. 



Picture 


File Size (Mix) 


New File Size 


Horse 


605 K 


99 K 


Crowd 


561 K 


154 K 


Cruise ship 


660 K 


176 K 


Waterfall 


649 K 


143 K 



Sound 335- 



File conversion: 
Preparing sound 
files for other 
platforms 

Summary: Use SoimdApp to convert 
files for downloading on other plat- 
fonns. 




F ile conversion comes at 
the end of your sound 
project when you’re prepar- 
ing flies for your Web server. 
You’ll need WAV files for 
Windows visitors andAU 
files for Unix visitors. Note 
that SoundApp refers to the 
AU format as NeXT. 



Edit Options 



Neui Play List 


88N 


Open... 


§80 1 


Conuert... . §§K 


Import To QuickTil^e... 


§81 


Close 


§810 


Saue 


§8S 


Saue Os... 




Quit 


§8Q 



1 . 



1. Start SoundApp. 

Start SoundApp, and select Convert from 
the File pull-down menu. 

2. Identify the target file format. 

Locale the file to be converted in the file list window. Press on 
the pop-up menu (Figure 2) beneatli the window, and identify the 
tai^ct lile formal, which is Windows WAVE and NeXT (or AU). 
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3. Create a destination folder. 

SoundApp will create a folder for your converted files. 
Accept the folder name or create a new one. Decide where 
you’d like the new folder to be saved. For example, click on 
Desktop if you’d like to see the folder saved to the desktop. 

4. Save and convert. 

Saving will start the conversion process. Look for your 
newly created folder; your new files will be inside. 
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Artist featured in this 
chapter 

Curtis Ebcrhardt has 
a BA.fwm the Art 
Institute of Chicago 
and an M A. from New 
York University. Curtis 
specializes in 
Macromedia Director, 
Strata Studio Pro, 
Softimage, Electric 
Image, FonnZ, and 
Photoshop. His clients 
include Messner 
Advertising, Web 
TV/Philips Magna vox, 
and Young and Ruhicam. 

Curt is A E @ aol. com 

http:/Avww.new-kewI 

.com/curtiscape 



Chapter 



GIF Animation 
And Shockwave 

GIF animation and Shockwave have become the two most 
popular fornis of animation on the Web. This chapter opens 
with several examples of both and then covers tips on how to 
create your own animation projects. By following examples 
created by new media artist Curtis Eberhardt, you’ll gather 
valuable infomation on how to use Photoshop to create ani- 
mation stills, optimize color GIF images using GIF Wizard, 
assemble a GIF animation in GIFBuilder, assemble a 
Macromedia Director animation, and created a “Shocked” 
version of a Macromedia Director movie for the Web. 




Curtis Eberhardt’s 
GIF animation 



Summary: Follow the URLs mentioned 
in this section to view Curtis EberhardFs 
GIF animations on the Web. 




Above: A close-up of the spaceship GIF 
animation. 

Above Right: Curtis Eberhardt*s 
portfolio page contains a tiny 
spaceship GIF animation in the lower- 
right comer ( http://www.new-kewl 
.com/curtiscape/ main.html ). 




Above: Curtis Eberhardt's home page, 
containing a GIF animation 
( http://www.new-kewl. com/curtiscape ). 




G if animation is easy to implement because the animat- 
ed image may be placed inline — or embedded in a 
Netscape page using the <IMG> tag. No scripting or plug- 
in is required. 

This page and the next page contain GIF animation exam- 
ples created by Curtis Eberhardt. For artists who are think- 
ing about creating their own GIF animation, Curtis offers 
the following suggestions. 

1. Create stills in Photoshop or GlFBuilder. 

Use Photoshop to create animation stills for your “flip-book” 
animation, and save your animation stills as GIF or PICT 
images. GlFBuilder, by Yves Piguet, is an easy-to-use tool 
for building GIF animations. For simple animations that 
include only movement, start with one image in GlFBuilder, 
move the art, and save successive new stills. 

2. Be conservative with GIF file sizes. 

Tr>' to limit the number of stills in your GIF animation as well 
as the physical size. Here are some examples: 



Animation File 


File Size 


Curtis Spaceship (this page) 


9K 


Bumpy Head (next page) 


18K 


Bumpy Arrows (next page) 


5K 
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Bumpy, king of 
the Internet 




Above: Curtis Eberhardt 's rotating car- 
toon head created with GlFBuilder. To 
see Bumpy\ visit http://www.new- 
kewl. com/curtiscape/ hump. fund. 

Right: Curtis created his Bumpy char- 
acter using 3D software. 



T 




Above: Curtis Eberhardt* s animated 
arrows, created with GlFBuilder. 




3. Use GIF Wizard to reduce GIF file size. 

GIF Wizard on the Raspberry Hill Web site (http://www 
.raspbcrryhill.com/gifwizard.html) is an online tool that can 
be used to reduce the size of your GIF images. {Note: For 
step-by-step instructions on how to use GIF Wizard, see GIF 
Wizard at Raspberry Hill in this chapter.) 
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Animation and 
interactive 
Web games that 
use Shockwave, 
Java, iive video, 
and QTVR 

Summary: Visit Web sites with 
Shockwave and Java to gather ideas 
for your own pages. 




Above: Web visitors who want to con- 
tact ''the spirits of the Dominion ” can 
play a WeeJee board game written in 
Java. 




Above: The SciFi ChanneTs Lost in 
Space pages contain a Virtual Dr. Smith 
Shockwave movie. 




T he SciFi Channel’s Dominion site (USA Network) at 
http:/Avvvw.sci fi.com is one of the most technically 
advanced sites on the Web. Visitors will find games and inter- 
active pages created with Shockwave, Java, and CGI scripts. 
A live video feed accessed through a link on this site’s home 
page displays what is cur- 
rently being shown on the 
SciFi Channel. (Note: 

Visitors can see video frames 
update every 30 seconds. To 
see new frames, they must 
click on the Netscape Reload 
button.) 




The SciFi Channel’s Web 
site is produced by the fol- 
lowing creative team: 
Creative Director Sharleen 
Smith, Senior Internet 
Producer Gary Markowitz, 
Online Projects Manager 
Sean Redlitz, and Lead 
Programmer Jamie Biggar. 
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''No designers 
were harmed in 
the production of 
this Web site.” 




Above: Visitors who explore the links 
on The Arrival site discover an interac- 
tive console. It opens in an extra win- 
dow over the Netscape browser. 




Above: The content of the console \s 
largest frame changes in response to 
mouse clicks on folder tabs. 




T he Arrival site was created for the Live Entertainment’s 
movie starring Charlie Sheen. This site has an interac- 
tive “console” created with Shockwave and Livescript. The 
button panel is a Shockwave movie with flickering lights and 
machine sound effects. The folder labs are clickable hotspots 
that branch to pages with movie stills, movie clips, and a 
movie .synopsis. You can reach The Arrival site at 
hltp://www.theamval.com. 



Movie fans interested in movie stills can use Netscape’s built- 
in downloading image 
feature. To download a 
JPEG image: 

• Position your mouse 
over an image. Then 
press and hold the 
mou.se button until a 
pop-up menu 
appears. 

• Select Save This 
Image in the pop-up 
menu. 

• In the dialog box 
that follows, click 
on Save. 

• The JPEG image will be saved to your hard drive. 
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Shockwave 
movies with 
moveabie parts 




Above: The Ben & Jerry 's Hair Game 
imitates a real-life game that uses a 
magnet and iron filings to move hair 
around. 




Above: The Disguise-O-Rama game 
from Marlow Publications imitates a 
real-life paper cut-out game. 




T he Disguise-O-Rama game, the Ben & Jerry’s Hair 
game, and the Build Your Own Bug game make innova- 
tive use of Director’s moveable sprite option. This feature, 
which can be implemented in the Score or through Lingo, 
allows viewers to slide cast members around while a movie is 
playing. Visit the following sites to see Shockwave movies 
with moveable parts: 



• Disguise-O-Rania (http://www.marlowpub.com/ 
Marlowe/disguise2.html) is based on Marlow 
Publication’s cartoon characters Sam and Max. The 
Shockwave game W£us an directed by Pauline Neuwirth 
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Above: To build a bug, players select 
bug parts fwm a collection at the 
bottom of the screen and drag them to 
the bug ** stage.** 
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(rcclkit@aol.com) and created by Chris Kingsley 
(webmaster@romdog.com). 

• Beil & Jerry’s Hair Game (http://www.benjerry 
.com/fun/bj-hairy.html) is based on a magnet hair 
game available in the Ben & Jerry’s gift shop in 
Waterbury, Vermont. 

• Build Your Own Bug (http://www.beiijerry.com/ 
riin/bj-hair>'.html) was created for Disney’s movie 
James and the Giant Peach. 
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Tip: QuickTime VR authoring tools are 
available from the Apple Developer's 
Association (APDA } at 
apda @ applelink . apple, com. 




G eneral Motor’s Product Line Web page has a small 
Shockwave movie and interesting QuickTime VR 
movie downloads of ctir exteriors and interiors. You can reach 
General Motor’s Web site at hllp://www.gm.com/ shock- 
wav/spinyeaOO.htm. 

QuickTime VR is Apple’s cross platlbrm movie format that 
offers a virtual reality experience in the form of a 320 by 
240 (or full-screen size), 360 degree panoramic image. The 
movie can be played on a Macintosh or a Windows comput- 
er using the QuickTime VR Player. To download the QTVR 
Player, visit Apple Computer’s Web site at http://qtvr.quick- 
time.apple.com/archive/index.html. Viewers can rotate the 
scene by positioning the mouse pointer to the left or right 
edge of the movie and pressing down on the mouse button. 
To Zoom in, press the mouse button and hold down the 
Option key. To Zoom out, press the mouse button and hold 
down the Control key. 

QuickTime VR movies may be formed from either still 
photographs or computer generated images. The movie cor- 
rects the distortion ordinarily associated with a panoramic 
image by incorporating a distortion correction algorithm. 
The distortion correction occurs on the fly while a viewer is 
panning a scene. 
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Promotional 
game previews — 
created with 
Shockwave 





A Shockwave preview of D, a CD-ROM game created by 
Acclaim Entertainment can be found at hup:// 

WWW. acclaimnation.com/D. The D site was created by 
Enginc.RDA, a multimedia start-up inside RDA International. 
Engine.RDA is a 20-year old New York City advertising 
agency owned 
by Michael Raez and Gail 
Dessimoz. Engine.RDA’s 
client. Acclaim 
Enieriainmenl, is well- 
known for llicir Mortal 
Kombal game, the most 
successful CD-ROM 
game ever produced. 




Pan of the nine-member 
Enginc.RDA team, Web 
artist, animator, and pro- 
grammer Curtis 
Eberhardl can be reached 
at CurtisAE@aol.com. 
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^^Until all 
digital media 
blends into one 
medium, design 
professionals 
must adapt 
their skills to 
several different 
formats.” 





Above: A QuickTime movie preview of 
D is available on Acclaim 
Entertainment \s Web site as a movie. 




He created most of the art and Shockwave movies on the Web 
site. Tile Engine.RDA team is led by digital media creative 
director, Regina Joseph. Regina is a multimedia content 
developer who frequently speaks at design and entertainment 
conferences. She is well-known for her creation of Blender,, 
the pop-culture digizine launched in 1994. 

Regina’s other team members include: 3D and animation 
artist Alex Osiroy, digital designer Chris Capuozzo, digital 
designer and recordable media artist John Hill, digital video 
specialists Claude Borenzweig and Damien Clayton, pro- 
grammer Vineel Shah, Webmaster Rob Keenan, and online 
media technical director Rob Molchon. When asked about 
the rapid changes in digital design, Regina explains that mul- 
timedia artists must constantly reorient themselves to the 
changes in digital media. Until all digital media blend into 
one medium, creative design professionals must adapt their 
skills to several different fonnats such as CD-ROM, 
enhanced CD, and the World Wide Web. A fourth, digital 
versatile disc (DVD) is expected to be available soon. 
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^^Killer Klowns, 
the band that 
produced the 
game’s sound 
track, reports 
the song goes 
over very well 
in New York’s 
downtown clubs.” 




:r~v-r — ; immtvwhi- M/anMiii* 




Above: Razorsnails pokes fun at drag 
racing and California skateboard art. 
You can reach the Thunk site at 
http.V/www .thunk.com (Note: look for 
Razorsnails and other Shockwave sam- 
ples on the companion CD-ROM in the 
back of this book). 
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T he Thunk site (hUp://wvvw.ihiink.com) contains a 
humorous digital game prototype called Razorsnails. 

The Shockwave movie was art directed by Larry Rosenthal 
and created by artist/animator Jason Fmchter. When the green 
light goes on, the snail runs over a razorblade. During the 
race, "snailjumps” include obstacles such as thumb lacks, a 
ginzLi knife, salt, and broken glass. A tellon patch and a gaso- 
line slick makes the snail feel good. The objective is to get the 
snail to ihe finish line with a minimal amount of damage. 

Killer Klowns, the 
heavy metal band 
that produced the 
“Razorsnails"’ sound 
track, reports that the 
song is ver>' popular 
in New York’s down- 
town clubs. 
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Curtis Eberhardt’s 
tips on creating 
animation 
frames in 
Photoshop 

Summary: Flip-hook animation can he 
created from a series of frames contain- 
ing 2D images. 



T wo-dimensional images wiih implied motion can be 
adapted to form a Hip-book type of animation known 
as GIF animation. In this example, Curtis Eberhardt stag- 
gers the position of an alien spaceship and a viewfinder that 
tracks the alien ship. Once the individual GIF frames are 
created in Photoshop, the GIF animation can be built in 
GIFBuilder. (Note: Readers who wish to follow the steps in 
this section may look for Curtis’ images on the companion 
CD-ROM.) 

1. Create a flip-book image in Photoshop. 

a. Open Photoshop. 

b. Select Open from the File pull-down menu. 

c. In the dialog box that follows, .select curtis_l .gif, and 
click on Open. 

d. The alien image will open in a Photoshop window. 
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2a. 




2b. 



2. Make changes to imply movement. 

a. Select the Rectangle Marquee tool. 

b. Click on the double-headed arrow in Photoshop’s 
Foreground/Background color box to make the 
background color black, as shown. 

c. Drag-select the alien ship. 





d. Reposition the alien ship slightly to the right. 

e. Deselect the “marching ants” by selecting None from the 
Select pull-down menu. 




3. Place the viewfinder image. 

(Note: Use the Place command in Photoshop to add the 
viewfinder. The Place command will only work if you have 
RGB Color Mode selected,) 



a. Select RGB Color from the Mode pull-down menu. 
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3b. 



b. Select Place from the File pull-down menu. 

c. In the dialog box that follows, select view.eps, and click 
on Open. 




3c. 

d. The viewfinder image will appear in the center of the 
Photoshop window surrounded by selection handles. 

e. Move your mouse over the placed image until your 
pointer arrow turns into a mallet. When you see the 
mallet, click your mouse. 

f . The selection handles will disappear, leaving a selection 
surrounded by marching ants. 





3e. 




3f. 




4. Adjust the color of the viewfinder image. 

Make the viewfinder image less bright by using Photoshop’s 
Curves. 

a. Select Hide Edges from the Select pull-down menu. 
This will make the marching ants disappear but the 
image will still be selected. 
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4b. 



b. Select AdjuslICurves from the Image pull-down menu. 

c. A Cur\'es dialog box will appear. 

d. Make sure the Preview box on the Curves dialog box has 
an “X” in it. Use your mouse to drag the curve down- 
ward, as shown. 

e. With the marching ants hidden, you will see the 
viewfinder image become darker when you move the 
ciirv'e. 
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4e. 



5. Move the viewfinder image. 

Curtis made the viewfinder first appear in the extreme upper- 
left comer. Only a small portion of it appears in the slide 
where it is introduced. 

a. Select Show Edges from the Select pull-down menu. 

b. Willi the viewfinder image .still selected, position your 
mouse over the marching ants until you see your selec- 
tion arrow. 




5b. 
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c- Drag the image up and to the left as shown, 
d. Select Hide Edges from the Select pull-down menu. 




6. Duplicate the viewfinder image. 

{Note: Two viewfinders slightly off center give the impres- 
sion of movement. An Option-drag will make a duplicate.) 




6a, 6b. 



a. Hold down the Option key, and drag the viewfinder 
image slightly to the left and down. 

b. A new duplicate will appear. 
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7. Save the image as a GIF file. 

(Note: Indexed Color Mode must be selected in order to 
save the image as a GIF file.) 

a. Select Indexed Color from the Mode pull-down menu. 

b. In the Indexed Color dialog box that follows, click on 
OK. 



c- Select Save As from the File pull-down menu. 
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7c. 
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7d. 




8 . 



d. In the Save As dialog box that follows, select 
CompuServe GIF from the Format pop-up menu. 

e. Edit the file name so that it reads curtis_2.gif instead of 
curtis__l .gif, and then click on Save. 




r. 



7e. 

8. Make the viewfinder chase the alien ship. 

Repeat Steps 2 through 7, and create screens to make the 
viewfinder chase the alien ship across the screen. 




9. Make the viewfinder ""lock on” its target. 

At the far right of the screen, create an image showing the 
viewfinder superimposed on the alien ship. 

10. Create an explosion. 

To create the effect of an explosion, Curtis painted a ball of 
fire behind the viewfinder using yellow, orange, and red. 
(Nofe: To see Curtis' explosion, open Netscape, and then 
open alien.html from the CD to view Curtis' completed ani- 
mation in color. ) 

The ball of fire grows over four to five slides and then sub- 
sides. The viewfinder is shown in the final slide, and the 
alien ship is missing. 
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Curtis Eberhardt’s 
tips on 

assembiing a GIF 
animation in 
GlFBuilder 



Summary: GlFBuilder, by Yves Piguet, 
is a program that combines several 
PICT or GIF images into one multiple 
image GIF file. 




GitBuilder 

la. 




A ssembling the GIF animation in GlFBuilder involves 
very few steps. In this example. Curtis creates a Bick- 
er effect by adding a black slide between images. 

1. Open GlFBuilder and add frames. 

a. Open GlFBuilder. 

b. The Frames window will appear. 

c. Select Add Frame from the File pull-down menu. 

d. In the dialog box that follows, .select the first of your 
animation frames, and click on Open. 
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e. Rc-selecl Add Frame from the File pull-down menu. 

f. In the dialog box that follows, select curtis_black.gif, 
and click on Open. 
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g- Repeat Steps c through f until you have added all of your 
images. { Note: Remember to alternate the black slide 
between images.) 

2. Add a loop to the animation (optional). 

{Note: Adding a loop to your animation will cause it to play 
over and over on the Netscape page.) 

a. Select Loop from the Options pull-down menu. 

b. Click on the radio button next to the field labeled times, 
and enter a number to indicate the number of times you 
would like the animation to loop. 
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3. Build the GIF89afile. 

a. Select Save As from the File pull-down menu. 
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b. In the dialog box that follows, name the animation 
alien.gif, and click on Save. 

4. Quit GlFBuilder and locate the GIF89a file. 

a. Select Quit from the File pull-down menu. 

b. Locate the GIF89a image in the Macintosh Finder. 

You Ml need to drag the image to the directory where you 
plan to store your HTML document. (Note: See Curtis 
Eberhardt’s tips on creating an HTML file to test your 
GIF animation.) 
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Curtis Eberhardt’s 
tips on creating 
an HTML Hie to 
test your GIF 
animation 


SimpleText 

T Tse SimpleText or your word processor to create an 
HTML document. If you use a word processor, be 
sure to save the document as Text Only. 


Summary: Use the <IMG> tag in an 
HTML document to test your GIF 
animation. 


1. Create an HTML document. 

a. Open SimplcTe.xt. 

b. Start a new document. Use the following markup tags: 
<HTML> 

<HEAD> 

<TITLE> GIF Animation</TITLE> 

</HEAD> 

<B0DY> 

c. Add an image tag. The image tag contains a SRC 
parameter, which contains the name of the image file. 

<HTML> 

<HEAD> 

<TITLE> GIF An1mation</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC-”alien.gir'> 

d. Add ending tags. 

<HTML> 

<HEAD> 

<TITLE> GIF Animation</TITLE> 

</HEAD> 

<B0DY> 

<IMG SRC-"al1en.g1f"> 

</B0DY> 

</HTHL> 
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2. Save the file. 

a. Select Save As from the File pull-down menu. 

b. In the dialog box that follows, name the document and 
add an .HTM extension. 
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3. Test the HTML file in Netscape. 

(Note: Make sure your GIF image and your HTML docu- 
ment are in the same directory. ) 



a. Open Netscape. 

b. Select Open File from the File pull-down menu. 

c- In the dialog box that follows, select your HTML 
document, and click on Open. 
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d. Your GIF animation will load and begin to play. 
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GIF Wizard at 
Raspberry Hill 



Summary: Use GIF Wizard a! the 
Raspberry Hill Web site to reduce a GIF 
file size up to 90 percent. 




G if Wizard at lnip://www.raspberryhill.com/ 

gifwizard.html is an online tool that reduces the size 
of your GIF images either on a Web server or on your com- 
puter hard drive. Curtis Eberhardt learned about the tool 
and gave me the URL just before this second edition went 
to press. Here’s how it works. 



1. Go to the Raspberry Hill Web site. 

a. Open Netscape or the Internet Explorer browser. 

b. Go to http://www.raspberryhill.com/gifwizard.html. 
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2. Identify your GIF image. 

a. Type the URL of your GIF image if it resides on a Web 
server. 
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b. Allemalively, you can click on the Browse button to 
locate the llle on your hard drive. 

c. If the image is on your hard drive and you’ve clicked 
on the Browse button, use the File List window in the 
dialog box that follows to locate your file, and click on 
Open. 
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d. The file name will appear in the field to the left of the 
Browse button, as shown. 



2d. 
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e. Click on the Magic button 

f. Click OK in the warning dialog box that follows. 
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g. A status page will appear, notifying you that the file 
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h. When the image has been processed, it will appear on 
a Web page containing the original image and opti- 
mized versions. 

i. Scroll down the page, and click on the link that reads 
Optimized versions with modified colors. 




j. A page will be displayed, containing images made up 
of several different palette combinations. In this 
example, artist Jane Greenbaum’s Marilyn Monroe 
icon is displayed with palettes ranging from 96 colors 
to 2 colors. 
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3. Save one or more GIF images. 

a. When you see an image you like, press and hold down 
the mouse button on the image. 

b. Select Save This Image As in the pop-up menu that 
appears. 

c. Select a folder on your hard drive in the dialog box that 
follows. 

d. Either accept the default file name of the new GIF 
image or type a new name and click on Save. 

4. Process a new image. 

a. To process another image, click on the link that says 
New GIF Wizard Request. 




4a. 



b. The GIF Wizard home page will be returned, and you 
can process another GIF image. 
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Create an 
interactive 
animation with 
Macromedia 
Director 



Summary: A self-numin^ Macromedia 
Director Player movie can he added to 
your Web pa^es for downloading to 
Macintosh or Windows machines. 







I n this example, Curlis Eberhardl creates an animated, 
interactive resume in Macromedia Director. (Note: A 
more advanced version of the interactive movie is on the 
CD-ROM in the back of this book,) By creating a small 
stage and limiting the color palette, Curtis was able to keep 
the movie to a reasonable size for Web downloading. 

1. Plan your animation. 

a. T^'pe of art. Director is a powerful authoring program 
that has limited art tools. Expect to create the art for 
your movie in programs such as Photoshop or KPT 
Bryce, known for their advanced graphics. 

For this interactive seli-promotion, Curtis created his 
background and Helios logo in KPT Bryce. He wanted 
an ethereal atmospheric effect, which he was able to 
create with shaders in KPT Bryce. Shaders arc used to 
configure atmospheric conditions, such as the amount 
of sun and the amount of cloud cover. His goal was to 
create a Lady-in-the-Lake Arthurian legend-type feel- 
ing with a logo emerging out of clouds. 

b. Animation. Director can be used to create 2D anima- 
tions and to as.semble 3D animations created in other 
software programs. 

Curtis* movie begins with a 3D “camera fly-through“ 
animation, which zooms in on the Helios logo. This ani- 
mation effect has its origins in cinematography and can 
be achieved in KPT Bryce by starling with a long shot 
and stepping the software to render each new scene. 
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Director requires that art elements be imported in the 
form of PICT images; therefore, each rendered frame 
would be a separate PICT image for the Director cast. To 
conserve on memory, Curtis kept the total number of 
frames to a minimum. 

Curtis’ robot and cone animations were created in Suata 
Studio. He used the robot to add a retro, high-tech look 
to the movie and chose gold, chrome, and silver colors to 
coordinate with the puiple shades in the background. 

The cone was rendered against a black background in 
Strata Studio because he needed the solid color back- 
ground to drop out in Director. 

Artists who create 3D animations in Strata Studio save 
their files as QuickTime movies and then use Adobe 
Premiere to save the animation as single frame PICT 
images required for importing into Macromedia 
Director. 

c- Interactivity. The hypertext scripting feature in 

Macromedia Director (called Lingo) is an optional tool 
for creating highly interactive presentations. When you’re 
planning your presentation, decide how much interactivity 
or how much scripting you would like built in. 

Curtis has an unusual combination of skills — he’s a 
painter and a Lingo programmer. He can use both skills 
to design and build an entire Director project. Artists 
who don’t know Lingo should team up with a program- 
mer who docs because Lingo is the key to creating inter- 
active elements. Working in tandem with a programmer, 
an artist can work on a visual interface while a program- 
mer develops Lingo scripts with minimal graphics. The 
interface and Lingo scripts can then be stitched together 
when both are complete. 

Most of Curtis’ larger projects require more Lingo 
programming than the scripts he built for his self- 
promotion. Interactivity in this chapter’s movie sam- 
ple is limited to button scripts, which display his 
portfolio elements on screen. 

Scripts can often make a movie more efficient and more 
interesting. As Curtis explains, “Lingo can be used to 
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extend animation. For example, instead of building lin- 
ear, pre-described motion using Director’s Score, Lingo 
scripts can be used to create random motion.” 

2. Begin by collecting your art. 

a. Create a folder, and name it Cast Members. 

b. Move your art and sound files into the folder. 
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3. Define a movie stage size in pixels. 

a. Select Preferences from the Edit pull-down menu. 

b. In the Stage size section of the preferences dialog box, 
enter the width and height for your stage. Curtis chose a 
400 pixel by 200 pixel stage area. You can also position 
the stage size onscreen by entering a number in the 
Centered and Left boxes. 
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4. Import the cast into the Cast window. 

a. Select Cast from the Window pull-down menu. This will 
open the Cast window. 

b. Click on the Cast window to select it. 


















S 

t 




L- . y..,, J 


to ' 


— n — ^ 


”m — 


^ U 


-T4 — ' 


■ "ta — ^ 


If 


— i7 


— 




— SB 


— ar 














U 














n 


\ t 




It 


n ; 


n 


M 


LilJi 



4b. 



366. Chapter 10 




4c. 
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c- Select Import from the File pull-down menu. Director 
will display PICT files in a file list window. 

d. You can either import each cast member one at a time, or 
click on the Import All button to import several cast 
members at once. 
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e. To select files other than PICT, select a file format from 
the Type pop-up menu. Each file format may be import- 
ed separately into the Cast window as single cast mem- 
bers or in groups. 

f. Curtis imported single frames from 3D animations he 
created in Strata Studio Pro. Next, he imported sound 
files he created using a Korg X-5 music synthesizer. 
With the cast members imported, Curtis was ready to 
begin the process of authoring the movie in the Cast 
window. 
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5. Save and compact your Director file. 

a. Select Save And Compact from the File pull-down menu, 
b- Name your Director file, and click on Save. 
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6. Plan the construction of the Score. 

The Director Score window is where a Director movie is 
assembled. It consists of 48 rows and hundreds of columns. 
To assemble a movie, cast members are dragged from the 
Cast window into various positions in the Score. {Note: See 
Step 7 for instructions on how to move cast members into the 
Score window. ) Note the elements of the Score window, 
below: 



Frame marker 
Playback head 

Tempo channel 
Palette channel 

Transition channel 
Sound channels - 

Script channel 

Animation channel 
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Review the elements of Curtis’ movie to understand how to 
construct your own. His plan for the Score window included: 
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a. Backgiound single frame elements that comprise a fly- 
through animation produced in KPT Bryce. These cast 
members occupy cells 1 through 24 in channel 1 in the 
Score window. In the Score window, low numbered chan- 
nels contain background images. Elements in 
higher-number channels “layer” up in front of elements 
in lower-number channels. 

Curtis placed the frame he produced with the long shot 
in cell 1 and the other images that “stepped” in cells 2 
through 24. Because Director is based on a movie 
metaphor, animation occurs when the playback head 
moves from left to right, and frames are presented on 
stage in this time-based medium. (Note: The playback 
head is the black cell-shaped object to the right of the 
word Frame in the figure below . ) 
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b- Curtis chose channel 3 for the cone animation so 
it would be in front of the background. He started the 
cone at cell 36, eight cells after the conclusion of the 
Hy-through animation. Similar to the fly-through 
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animation, the cone animation consists of single frame 
“stepped” images, created in Strata Studio and occupy- 
ing cells 36 through 139. 

c. Channel 5 holds the robot animation, which occupies 
cells 28 through 139. 

d. Tlie music files that Curtis created with his music synthe- 
sizer occupy cells 1 through 139 in the Sound channel. 

e. Director is a time-based medium. The Tempo channel 
contains instructions that Curtis added to control the 
movie’s timing. {Note: See Step 12 for instmetions on 
how to adjust a movie \s tempo.) 
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7. Move cast members to the Score window. 

a. Click on a cast member in the Cast window to select tlie 
cast member. 

b. Press and drag the cast member to a desired cell position in 
the Score window (the mouse pointer will turn into a hand 
while you drag). When the cast member is positioned over 
the desired cell position, release the mouse button. 
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c. The cell where you dropped the cast member will contain 
an abbreviated number representing the cast member’s 
number from the Cast window. (Note: Cast members that 
occupy a cell position are no longer referred to as cast 
members. When you drag a cast member to the Score, it 
becomes a sprite.) 
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d. To see more inlbiTnation about a particular sprite than 
what can be seen in a cell, click on a cell to select it. 
Director will display the contents in the upper-left corner 
of the Score window. 

8. Use In-Between Linear to duplicate a sprite. 

To copy a sprite into a group of contiguous cells, use 

Director’s In-Between command. 

a. Click on the cell in the Score window that contains a 
sprite you would like to duplicate. This will select the 
cell and its contents. 
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b. Drag to select the contiguous group of cells where you 
would like the sprite to be repeated. 
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8b. 
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c. Select In-Between Linear from the Score pull-down 
menu (Figure 8cl) to fill the group of contiguous cells 
with the sprite (Figure 8c2). 
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9. Try playing your movie. 

Once you have moved cast members to the Score and used 
In-Between Linear to duplicate sprites into channels, play 
your movie. Move the Score window to one side of the 
screen so you can see Director’s stage, where the movie is 
played. When you press Play, notice the playback head move 
from left to right. 

a. Select Control Panel from the Window pull-down menu 
(Figure 9a 1 ) and the Director’s Control Panel (Figure 
9a2) window will appear. 




“■ . a 

b. Click on the Rewind button to rewind the movie. 

So. 

c. Click on the Play button to play your movie. 
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10. Plan interactive areas in the Score. 

When you played your movie, you probably noticed that the 
playback head moved straight across the Score from left to 
right and then kept on going. When you plan an interactive 
movie, you’ll need to get the playback head to loop in sec- 
tions, or move past a group of frames over and over, so the 
movie will appear to stop for viewer interaction. To create 
this section, you will need: 

a. A main interactive area. Sometimes referred to as a 
menu area, this section can provide a viewer with choic- 
es concerning where to branch in a movie. The action is 
usually a mouse click on a button. 

b. Interactive areas where view'ers branch. These arc 
areas in the Score where the viewer can branch to see 
something new. In this sample, the viewer branches to 
areas of the Score containing artwork. 

c. Frame markers to label areas in the Score. 
Interactivity requires Lingo scripts. Frame markers help 
make scripting clear and easy to understand. (Note: The 
frame markers are labeled Art, Web, ami Multimedia in 
the figure below.) 
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d. Navigation buttons. Buttons were not required when 
the movie opened; they don’t show up in the Score win- 
dow until frame 140. Rows 6 through 1 1 contain button 
sprites and their labels. 

Buttons have Lingo “button scripts” attached that will 
cause Director to branch to a predesignated area in the 
Score. (Note: See Step 14 for instructions on how to cre- 
ate button scripts.) In the figure on the previous page, 
Curtis has added go loop commands in the Scripting 
channel in frame positions 145, 155, 162, and 169. 
(Note: See Step 1 5 for instructions on how to create 
loops with Lingo \s go loop command.) 

Curtis also added an image of a CD-ROM cover he 
designed as an item to branch to in the Art category. 
Notice the sprite for the CD-ROM cover occupies 
frames 150 through 155 in row 13 (see figure on previ- 
ous page). Other art will be added to the Web and 
Multimedia sections, which are adjacent to the Art sec- 
tion. Notice the.se sections can be identified by their 
frame markers at the top of the Score window. 

(See figure on previous page.) 




11. Position buttons in the Score. 

Drag your button cast members (Figure 1 1 a) into high- 
numbered channels (Figure 1 1 b) in the areas you’ve 
planned for viewer interaction. Curtis designed Art, Web 
Design, and Multimedia buttons to branch to parts of the 
Score containing his portfolio pieces, and moved them into 
rows 6 through 1 1 . (Note: See the figure on the previous 
page and Step 7 for instructions on how to move cast 
members to the Score window.) 
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12. Create frame mariners. 

a. Drag markers from the marker well, and place them 
above the first frame in each of your interactive areas. 
(Note: The marker well is the triangle above the row 
numbers over the word Frame.) 

b. After you have positioned a frame marker, let go of the 
mouse and enter a label. 
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Tip: The simplest way to make buttons 
interactive is to add a Lingo button 
script to button cast members and direct 
Lingo to branch to an alternate part of 
the Score. Although more elaborate 
schemes can be used, this method is the 
easiest for beginners. (Note: See Step 14 
for instructions on how to create Lingo 
button scripts. ) 



13. Resave your movie. 

a. Select Save And Compact from the File pull-down menu. 
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b. Notice Director does not display a Save dialog box the 
second time you save. 



1 
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14. Add button scripts. 

a. Click to select a button cast member in the Cast window. 
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b. Select Cast Member Info from the Cast pull-down menu. 

c. Click on the Script button in the Bitmap Cast Member 
Info dialog box. 




d. Clicking on the Script button will open a Script window. 
Button scripts are so common that Lingo will provide 
you with on moiiseUp and end. {Note: end is just end 
MouseUp abbreviated as end. ) 



- Script of Cast Member 51 ^^^==yiig. 


on mouseUp 




go to 




end 
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e. T^pe 



on mouseUp 
go to "Art" 
end 

(Note: Use Director's frame markers to label cell posi- 
tions. This makes scripting easier and Director will 
remember the cell position even if rows are inserted into 
the Score. For every uniejue button script, you will need a 
unic/ue cast member. Cast members may be duplicated in 
the cast window and will have a unique cast member 
number.) 



Tip: To learn Lingo, the hypertext 
scripting language that comes with 
Macromedia Director John ‘7. 7!” 
Thompson and Sam Gottlieb \s 
Macromedia Director Lingo 
Workshop is an excellent book. John 
Thompson wrote Lingo, so the infor- 
mation is right from the .sotttve. John 
Thompson teaches at New York 
University. His hook is published by 
Hayden Books. 



Lingo is a hypertext computer language that comes with 
Director. The language is comprised of English-like sen- 
tences, called scripts, which may be placed in a sprite, a cast 
member, a frame, or a movie. As a result, scripts arc 
described as sprite scripts, cast member scripts, frame 
scripts, or movie scripts. 

An event handler is the most common Lingo script. It is used 
to tell Director what to do when an event occurs. Events are 
mouse and key actions, described below: 

mouseDown mouse button is pressed 
mouseUp mouse button is released 
keyDown a key is pressed 
key Up a key is released 

Event handlers, like all Lingo scripts, must be written with a 
required structure known as syntax. For example, in the fol- 
lowing go to command, it is customary to put the name of the 
frame marker in quotation marks: 

on mouseUp 

go to ’*Art” 
end 



15. Create loops with lingo’s go loop command. 

Notice in the figure below that each of the cells at the end of 
each interactive section has an element in the script channel. 
These cells contain the Lingo command go loop. When the 
playback head reaches a go loop command as it travels from 
left to right, the playback head will loop to the previous 
marker and keep looping until Director receives some other 
command, such as directions in a button .script. 
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a. Position your mouse in the Script channel on the last 
cell in an interactive section. 

b. Double-click your mouse to open a Script window. 

C. Type go loop. 
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d. Click on the Close box in the Script window. 

e. Repeat this or copy and paste the contents of this cell into 
other cells at the end of any other interactive sections. 

16. Adjust the tempo of your movie. 

When you play your movie for the first time, yoif II notice 
that some sections play loo fast. To adjust the timing of the 
movie, liming elements can be added to the Tempo channel. 

a. To set the tempo of his movie, Curtis opened the Tempo 
dialog box in frame one. This can be done by double- 
clicking cell 1 in the Tempo channel. 

b. To set the tempo, move the Tempo slider (Curtis used 10 
fps — frames per second), and click on OK. 
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c. You can also use Tempo commands to pause a movie 
while a sound or video finishes playing. 
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17. Resave and create a movie projector. 

When you have completed your movie, save it as a self-run- 
ning projector. 

a. Select Create Projector from the File pull-down menu. 

b. Director will warn you that creating a projector will 
close the movie file yotfre working on. Click on Save to 
save any changes. 




Creating a projector uiill close the mouie file 
you are currently uiorking on. 
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c. In the dialog box that follows, locate your movie file in 
the file list window on the left. 
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[ Create... ^ 
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d. Click on Add. 



e. Click on Create. 
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f. Select a location for your movie in the dialog box that 
follows. 

g. Click on Save. 
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Soue projector os: 
Projector. resume 



h. The projector that you create 
will be a .self-running Director 
movie playable on any 
Macintosh computer. 




Pro jector resume 
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Creating a 
Director movie 
for use with 
the Shockwave 
Director Internet 
Player 

Summary: Macromedia 's new tool for 
playing Director movies on the Internet 
includes a new Player technology that 
will be integrated into the next release of 
the Netscape browser. 





la. 




T he Director Internet Player described in this section is 
one step on the way to integrating Director’s multi- 
media authoring with Netscape. As a helper application, the 
new player technology provides sound, animation, and 
interactivity. When the Director Player is integrated into 
Netscape, movies can be played from the Web. 

Director movies for the Web are created with Macromedia 
Director’s software, but the size should be limited to 200 K. 
“Preprocessing” a movie with Macromedia’s Afterburner 
software compresses a movie, and the Director Internet Player 
decompresses the file contents. (Note: See Compressing a 
Director movie with Afterburner later in this chapter.) In this 
section, Curtis Eberhardt offers tips on how to limit the size of 
your Director movies. 

1. Colorize one4iit cast members . 

Limiting the bit depth of cast members substantially reduces 
the file size. One-bit cast members, which are black and 
white, can be colorized on the Director stage to conserve on 
file size. 

a. Import one-bit images (black and white) into the Cast 
window. (Note: See Create an interactive animation 
with Macromedia Director, earlier in this chapter, for 
instructions on how to import the cast into the Cast 
window . ) 
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b. Move the cast member to the stage. (Note: See Create an 
interactive animation with Macromedia Divecior for 
instructions on how to move cast members from the Cast 
window to the Score.) 

c. Click on an onstage cast member to select it. A bounding 
box will signify that the cast member is selected. 

d. Select Tools from the Window pull-down menu. 

o. With the cast member (or sprite) selected, click on the 
foreground color in the Tools window to open the 
palette. Drag to select a color. 




f. When you release the mouse button, the cast member 
will take on the color you selected. 
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2. Use tiles to fill a background or other shape. 

Tiles can be used lo create a wallpaper effect on the Director 
stage. Because they are based on one small cast member, 
tiling is a way to conserve on file size. Use the FilllPattem 
command in Photoshop to experiment with the tile pattern. 

a. Start by selecting an area of a Photoshop document you 
would like to see tiled. In Photoshop, this is referred to as 
a pattern. 

b. Select Define Pattern from the Edit menu. 

c- To test the pattern, open a new document by selecting 
New from the File pull-down menu. 

d. Enter 200 pixels in the Width box and 200 pixels in the 
Height box. 
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e. With the new test document open, select All from the 
Select pull-down menu. 

f. You’ll notice the document is selected when you see a 
trail of marching ants around the perimeter. 



g- Select Fill from the Edit pull-down 
menu. 
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h. Select Pattern from the pop-up menu in the Fill dialog 
box. 

i. Your document will be filled with the pattern youYe 
testing. 
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i- If you're satisfied with the tile and would like it to be 
available in Director, import the tile into Director's Cast 
window. {Note: See Create an interactive animation with 
Macromedia Director /br instructions on how to import 
the cast into the Cast window.) 

k. Open Director's Paint window by selecting Paint from 
the Window pull-down menu. 

l. With the Paint window open, .select Tiles from the Paint 
menu. 

m. Click on the Cast Member radio button, and click on the 
right and left arrows to locate the cast member you wish 
to tile. 



This tile is: 

O Built-in 
® Cast Member: 85 
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n. Use the Width and Height pop-up menus to pick a size 
for the tile. 
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o. A small dotted rectangle will reflect the size of your tile in 
the Tile wdndow. Drag the small dotted outline to the area 
you would like to use as your tile. 

p. Click on OK. 
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q. Your tile will become a pattern on the pattern selector 
chip at the base of the Tools window. 
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r- To create a tiled background, select the shaded half of 
rectangle tool from the Tools wdndow. 

s. Then use the tool’s crosshair to drag a rectangle large 
enough to cover the stage. 
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t. With the rectangle selected, select the pattern selector 
chip, and drag-select the new pattern. 

u. When you let go of the mouse, the new pattern will fill 
the rectangle. 




3. Check on cast mendber size. 

The Bitmap Cast Member Info dialog box will provide valu- 
able information about cast member sizes as you are build- 
ing your movie. 

a. Click on a cast member in the Cast window. 

b. Select Cast Member Info from the Cast pull-down menu. 

c. Notice the size is indicated in the dialog box that opens. 
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Tip: For information and instructions 
on how to upload files to your Internet 
provider's server, see the Image Map 
chapter. 
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4. Try remapping a color cast member. 

Director’s Transform Bitmap command allows you to alter 
the bit depth of a color cast member and, as a result, reduce 
the file size. This command cannot be undone, so always test 
the remap on a copy of the cast member. 

a. Click on a color cast member in the Cast window to 
select it. 

b. Select Copy Cast Members from the Edit pull-down 
menu. 

c. Click on an empty cast member position in the Cast 
window. 
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d. Select Paste Bitmap from the Edit pull-down menu. 
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e. With the cast member copy .still selected, select 
Transform Bitmap from the Cast pull-down menu to di.s- 
play the Transform Bitmap dialog box. 

f. Select a smaller bit depth from the Color Depth pop-up 
menu. Click on OK to remap the cast member to a 
.smaller bit depth. 




g. Double-click on the cast member to examine the color in 
Director’s Paint window. 

h. Sometimes the color is acceptable at a smaller bit depth; 
other limes, it is not. 
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5. Use small sound snips and loop one or two. 

a. Curtis used several small 2 K to 4 K sound snips 
throughout his movie (Figure 5a). 

b. To loop a sound, start by selecting a sound in the Cast 
window. 

c- Select Cast Member Info from the Cast pull-down menu 
to display the Cast Info dialog box. 

d. Click to put an “X” in the box labeled Loop. This will 
extend a sound without adding to the file size. 
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Tip: To consen^e on file size, try to use 
sound sampled at II kHz rather than 
22 kHz. 
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Compressing a 
Director movie 
with Afterburner 



Summary: Preprocess a Director movie 
with Macmmedia *s Afterburner before 
placing it on a Web sen>er This com- 
pression step makes the movie small and 
compact, so that it moves quickly over 
the Web. 



M acromedia’s Afterburner adds 
a compression step to building 
movies for the Web. Afterburner is an 
easy-to-use drag-and-drop applica- 
tion that will create a file with a .DCR 
extension. The compressed movie will be decompressed by 
the Director Internet Player as it is received over the Web. 



Afterburner 



1. Drag and drop your Director movie. 

a. Locate your Afterburner software. 

b. Drag and drop the Director 
movie on top of the 
Afterburner icon. 

c. Release the mouse button. 

This step automatically 
launches the Afterburner 
application. When the software is 
launched, you’ll see an Output dialog box. 

d. Use the default file name or type in some other name, but 
keep the .DCR extension. 
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e. You’ll see a progress box as the movie is processed. 

f. The compressed file is the file you will place on a 
Web server. 
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Chapter 




The “Father Of VRML” 

Mark Pesce initiafed the 
development of VRML 
(Vmual Reality Modeling 
Language), the language 
that describes 3D space 
on the Internet. Look fora 
chapter f mm his hook 
published by New Riders, 
VRML Bixwsing and 
Building Cyberspace, at 
http://\vww. mcp. com/gen - 
eral/news 7/chap2. html. 




Artist featured in this 
chapter: 

Alex Shamson has 
a B.S. in Industrial Design 
fmm the Philadelphia 
University of Art. 

alex@vrmill.com 
http.VAvww. rnnill. com 



VRML World 
Building 

VRML or. Virtual Reality Modeling Language, is the lan- 
guage that describes 3D space on the Internet. Designers 
who are interested in creating VRML discover there are 
three ways to create these new 3D files. Traditional 3D mod- 
eling manufacturers have added VRA'IL file writing features 
to 3D software programs, and several new, low-cost world- 
building tools have emerged. Hand coding VRML in a text 
processor is also an option. 

In this chapter, industrial designer Alex Shamson shares tips 
on how to create a dinosaur head in Virius WalkThrough Pro, 
a 3D visualization tool popular with architects and 
Hollywood film directors. Virtus Corporation, founded by 
David Smith, was the first 3D software manufacturer to add 
a VRML file-writing feature to their software. Also included 
in this chapter are tips on how to navigate your VRML file in 
the Virtus Voyager VRML browser, how to open your 
VRML file in a word processor and adjust the VRML code, 
and how to use the <EMBED> tag to add a VRML window 
to a Web page. 






VRML on the 
Internet 

Summary: Highly creative and 
far-sighted 3D world builders have 
taken Mark Pesce *s vision and created 
imaginative new VRML worlds on the 
Internet. 
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A lex Shamson (alex@vrmill.com), who leache.s 3D 

design al New York’s Pratt Manhattan, is a painter and 
an industrial designer. Industrial Design is the specialty that 
teaches the design of everyday objects and 3D space. 



Above: A Virtual Reality Shopping Mall 
is the centerpiece of Alex's VRML pon- 
folio. 

Above Right: Alex Shamson \s home 
page contains numerous links for world 
builders interested in VRML. 




Above: A ''scooter" from Alex's tradi- 
tional 3D portfolio. 



Although his industrial design background has given Alex a 
broad background in 3D design, Alex has aggressively pur- 
sued 3D world building on the Internet. Like a handful of 
design professionals nationwide, Alex feels the Internet 
holds enormous opportunities for 3D world builders. 

Although Alex has used Virtus WalkThrough Pro and has 
built most of his models on the Macintosh, recent develop- 
ments in VRML have required him to make changes. For 
example, he recently bought a Windows NT machine 
because of Apple Computer’s failure to embrace VRML as a 
Hie standard. Although aspects of Apple’s alternative 3DMF 
format have been added to VRML 2.0, their less-than-enthu- 
siastic support of VRML has made it impossible to develop 
VRML worlds on a Macintosh becau.se there are so few 
tools. 

Even though there are many more VRML tools available on 
the Windows platform, Alex has also started to add VRML 
to his models by hand in a word processor. 
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Above: Auto showroom display from 
Alex's traditional 3D portfolio. 

Above Right: Alex's "Metatown "fmm 
his traditional 3D portfolio. 




At this lime, no 3D applications support the multimedia fea- 
tures available in VRML 2.0. As Alex explains, “3D artists 
who want to adjust lighting, or add camera perspectives or 
any other new feature will need to learn how to hand code 
VRML. Until 3D software programs can write the new fea- 
tures into a VRML file, I recommend that artists use 
resources on the Web to learn about hand coding.” Alex has 
generously prepared a very large number of links on his 
Web site (http://www.vrmill.com). These links are helpful 
for his clients and students who are new to VRML. 



1. Assistance to surfers. 

Besides providing links to the latest versions of Netscape 
Navigator with Live3D and the Internet Explorer brow.ser, 
Alex has created a concise overview of VRML and has 
answered such questions as: 

• What is VRML? 

• What can you do with VRML? 

• What do you need to see VRML files? 

• What is VRML 2.0? 

• What are multiuser virtual worlds? 

• What’s an avatar? 
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2. Resources. 

In this section, Alex has organized a set of links to such 
famous sites as VAG (VRML Architectural Group) and 
The VRML Repository. This section also contains numerous 
valuable links that Alex used to learn VRML, including 
links to: 

• VRML Architectural Group 

• The VRML Repositor>' 

• NYVRMLSIG 

• ARTNETWEB 

• VRML tutorials 

• Authoring software 

• VRML browsers 

• Compression utilities 

• Books on VRML and 3D design 

3. Alex’s design and training and services. 

Alex is a self-employed creative director/design consultant 
specializing in multimedia and Web development. As a pio- 
neer in the area of creating 3D virtual w'orlds on the Internet 
and as a founding member of New York’s NYVRMLSIG, 
Alex built his Web site to promote his 3D design business 
and to share the knowledge he has acquired in 3D modeling 
and virtual world construction. 
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Visit Starbase C3 
to see a VRML 
adventure, 
shop for VRML 
spaceships, and 
participate in 3D 
chat 




Above: The Starbase C3 Flight 
Operations Center contains live VRML 
animations. In this VRML adventure, the 
USSC3 Talon leaves the flight dock, trav- 
els into an asteroid field, orbits a planet, 
and travels to another flight dock. 

Above Right: Larry Rosenthal \s 
Starbase C3 site. 

http://w\vw. cube 3. com/starbase. htm 




L arry Rosenthal, industrial designer and founder of 
New York’s NYVRMLSIG, has created Starbase C3 
(http://www.cube3.com/starbase.htm), one of the most 
innovative new VRML sites on the Internet. 

Larry has packaged his starship models as construction kits 
for interested VRML model builders who wish to assemble 
their own models. He’s also built animated VRMI . adven- 
tures with the help of "Chief Engineer” Frederic Gontier and 
"Flightdock Engineer” Marc Thonier. For Web-initiated 
spaceship adventure fans, these animations represent a form 
of electronic entertainment that will soon be very popular 
among the computer gaming generation. 

For his most devoted following, Larry has created a 
Starba.se C3 Membership. For $29.95 per year, members 
receive monthly “extras,” including a model that is not 
available on the Starbase C3 site, a custom “Conbot” avatar, 
extra model parts not offered on the site, about a half dozen 
high-resolution renderings of spaceships, and a monthly 
HTML newsletter containing VRML building tips. Larry 
will also launch the BlackSun CyberHub 3D chat engine, 
where he'll offer members private VRML chat that will be 
closed to the public. 

In late 1996, Larry worked with New York developers Mall 
and Dan O’Donnell on his Starbase C3 3D chat site. Matt 
and Dan are identical twin brothers who are well known for 
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Above: The USSC3 Talon entering the 
flightdock. 



iheir Web development skills. Nicknamed by their New York 
VRML and programmer colleagues as the “Cicada twins ” 
Matt and Dan own Cicada Web Development and often get a 
room rumbling with energetic talk about new technology dur- 
ing Internet meetings in New York. When asked to demonstrate 
their latest project at the NYVRMLSIG meeting in January, the 
Cicada team unveiled their 3D chat engine written in Java. 
Working with Lany Rosenthal, who built the starbase model in 
VRML, the O’Donnell brothers developed their Java-based 
chat engine, which works in a Java-enabled Netscape Navigator 
window without any extra plug-ins or client software. 

1. The CyberCash system. 

Larry is a CyberCash merchant, which means customers who 
have a “CyberCash CyberCoin Wallet” can purchase a 
VRML model online and instantly download it to their com- 
puter’s hard drive. CyberCoin wallets are programs that may 
be obtained free at the CyberCash site (http.V/vvww.cyber- 
cash.com). Once a Wallet program is downloaded, cash can 
be transfened from a consumer’s credit CtU'd or checking 
account. 

CyberCoin services are distributed through banks that offer 
online merchants the CybeiCoin service and offer con- 
sumers co-branded wallets. Consumers and merchants each 
obtain free wallet software, and the merchants pay the bank 
a per-transaction fee to use CybeiCoin. The bank pays 
CyberCash a transaction fee for providing the technology 
and processing service. Merchants Find new revenue chan- 
nels with CyberCoin because they can now offer services 
and goods at low and incremental costs that were previously 
prohibitive because the pricing models of credit cards w'ere 
ineffective with low-cost items. 

CyberCoin uses the most advanced security features for 
consumers, banks, and merchants. When consumers bind, or 
connect, their checking accounts to their wallets, CyberCash 
confinus three things: that the people are who they say they 
are, that the accounts are valid and are active accounts with 
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Above: Close-up of a **Conbot** or 
Construction Robot. 



money in them, and that each person is connected legally to a 
specific account. After the account is confirmed, CyberCash 
protects the consumer through the use of 768-bit RSA 
encryption with the password-protected wallet. CyberCash is 
also working with VeriSign to incorporate Digital IDs for 
instantaneous validation of individuals’ and merchants’ iden- 
tities. In addition, funds in the CyberCoin system are FDIC 
insured. This guarantees that, if the CyberCoin issuing bank 
goes out of business, the consumer’s money is insured by the 
federal government. 

CyberCash cuiTently offers purchases made only with U.S. 
dollars and at online merchants who have a U.S. bank 
account. Eventually, CyberCoin will be able to be used out- 
side the United States with any foreign or international bank 
that is a CyberCoin issuing bank. When a consumer buys a 
good or service on the Internet listed in foreign currency, the 
system will translate the currency on-the-fly with the 
exchange rate guaranteed by a bank, and the debit will occur 
in the consumer’s domestic currency. Consumers will also be 
able to hold a number of different currencies in their wallet, 
similar to the way funds are held in the physical world. 




2. Steps to order a construction kit online. 

a. Visit the CyberCash site at http://www.cybercash.com 
and download a free CyberCoin wallet. (Note: The 
Windows 95/NT platform is required at this time.) 

b. Add either credit card or checking account funds to your 
CyberCoin wallet. 

c. Click on the New VRML Ships on the Starbase C3 home 
page to link to the Online Datakit Directory and Sales 
page. 




2c. 
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d. On the Dalakil Directory and Sales page that follows, 
scroll the page to find a model. 

e. Click on a gold coin under the illustration of the space- 
ship you’d like to purchase. 



0 CLICK ON COIN TO BUY THE P OATAKH NOW 



2e. 



f- The CyberCoin wallet launches a transaction, and a 
datakit in a compressed ZIP format is downloaded to 
your computer. 




3. Steps to view the VRML adventures. 

a. Click on the Fighter Flight VRML on the Starbasc C3 
home page to link to the Flight Operations Center. 

b. On the Flight Operations Center Web page that follows, 
click on a VRML live feed. 

c. If you have Netscape Navigator with Live3D, you’ll see 
a VRML 3D animation. 




3c. 



MEMBERSHIP INFORMATION 



4a. 



4. Steps to become a Starbase C3 member. 

a. Click on Membership Information on Larry’s Starbase 
C3 home page. 
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4c. 



b. On the Starbase Command Center Web page that 
follows, click on the Official Membership Form link. 

c. A Membership Form will appear on the Web page that 
follows. 

d. Press and hold down your mouse button, and select Save 
This Image As from the pop-up menu. 



Back 
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Open Ihis Image 



Copy this Imago 
Copy this Imoyo Location 
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e. In the dialog box that follows, save the form to your hard 
disk by clicking on Save. 
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f- Alternatively, you can click on the Print button at the top 
of your Netscape Navigator window to print the fonn. 

g. If you have saved the form to your hard disk, open it in a 
paint software program, and print it on your printer. 



5. Steps to visit the 3D chat area. 

a. On the Flight Operations Center Web page, click on the 
Enter 3DVRML Flightdock Chat link. 



R 3DVRML FLIGHTDOCK CHAT 
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5f. 



b. On the Web page that follows, scroll to the Avatar 
Selection area. 

c- Select one of the available avattirs by clicking on an 
avatar image. {Note: The field labeled Avatar URL will 
Jill in automatically when you select an avatar ) 

d. Enter a Conbot name in the field labeled Conbot Name, 
and click on Submit. 

e. Enter an optional avatar URL in the field labeled Avara/- 
URL. {Note: This field is designed for people who want 
to add their own VRML avatars. If you *ve selected a 
Conbot, the field will already be filled in.) Click on 
Submit. 

f- To enter the 3D chat area, click on the Live 3D version 
link. 

g- The Starbase C3 chat window will appear and float over 
your Web page. A VRML window will appear on the top 
half of the lloating window, and a text-based chat area 
will appear in the bottom half. To participate, type a 
comment in the text window at the bottom of the floating 
screen, and press Return. 




5g. 



VRMLWorld Building 401. 














Live comedy in a 
VRML worid— 
at Mom’s Truck 
Stop 




Above: Argle, host of Meta Play *s 
Simprov. 

Above Right: The MetaPlay Web site at 
http://w\vw. metaplay. com. 
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Above: Waitress at Mom 's Truck Stop. 

Tip: The MetaPlay team has posted 
cartoons and logs of the live episodes 
at their Web site. The Web site is 
enhanced with MIDI tunes and 
QuickTime movies. 




S improv. That’s what the MetaPlay comedy team calls 
the multiuser improvisational comedy performance that 
Internet users experience at Mom’s Truck Stop. The setting 
is a ’50s diner, and the comedy team is Matt Dominianni 
(nose@echonyc.com), Paul Marino (havoc@interport.net), 
Frank Dellario, Matt Duhan, and Matt Hapke. Paul Marino 
is the 3D artist who created the VRML diner in 3D 
Studio Max. 

Although you can access the VRML diner via Netscape 
Navigator with Livc3D (http://www.metaplay.com), the 
MetaPlay comedy performances are performed live in a 
MOO. MOOs are social MUDs (multiuser domains), or 
places on the Internet where people interact and create their 
own worlds. MUDs have been traditionally text-based, but 
Chaco’s Pueblo client software turns a text-based MOO into 
a multimedia experience. 

Pueblo users who visit Mom’s Truck Stop experience a split 
screen, with the 3D diner on one side and 3D chat or the 
performance on the other. There’s also music and 2D 
images of the people w'ho interact in the diner. At scheduled 
intervals, which are announced on the MetaPlay Web site 
(http://www.metaplay.com), visitors can airive at Mom’s 
and take part in a live performance. 
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"Don't be fooled 
by my cute smile, 
I'm actually 
planning to take 
over the worid." 

— Argie, host of 
MetaPiay’s 
Simprov 




Above: Mom *s Truck Stop through the 
Pueblo browser window. 

Above Right: Mom *s Truck Stop 
through Netscape's Live 3D window 




1. Getting to Mom’s Truck Stop. 

a. Download and install the Pueblo client from the Chaco 
Web site at hltp://vvvvw.chaco.com. {Note: The Windows 
95/NT platform is required. Alternatively, Mom 's Truck 
Stop may be experienced with a Telnet client on a 
Macintosh computer, but this will be a text-only 
experience.) 

b. Ifyou have the Pueblo client software installed on your 
hard drive, click on the Mom’s Truck Stop link on the 
MelaPlay Web site at http://www.metaplay.com. This 
will launch Pueblo if it’s available on your computer and 
take you directly to Mom’s. 

c- Alternatively, you can launch the Pueblo client software 
and select Quick Connect from the Worlds pull-down 
menu. 

d. In the dialog box that follows, click in the field labeled 
Host, and type: 

s1mprov.chaco.com 

In the field labeled Port, type: 

4444 

Click on Connect. 

e. The Mom’s Truck Stop screen will appear. 

f- Drag on the window pane that separates the VRML win- 
dow from the chat screen, and make the VRML window 
occupy one-third of your screen. 
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Above: As you navigate a VRML 
browser window and come into 
Mom *s Truck Stop, you discover the 
diner is located on the surface of a 
bowl of soup. 

Above Right: The Pueblo window is 
an adjustable split screen. Users can 
drag the window pane to make the 
VRML window occupy one-third of 
the screen during show time. 
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Above: Emote buttons at the top of the 
Pueblo window provide a quick way to 
make your character smile, bow, wave, 
nod, wink, laugh, clap, or frown. 




2. Participating in the improv. 

Plan to arrive at Mom’s Truck Stop 30 minutes before 
show lime to explore the 3D diner through the VRML win- 
dow in Pueblo’s split screen or through the Netscape 
Navigator Live3D window at http://www.metaplay.com. 

a. To participate as a character during a perfonnance, click 
in the Message box at the bottom of the screen, and type: 

Connect Guest 

This will generate a Guest character. 

b. Click on an emote button at tlie top of the Pueblo screen 
to see what your face looks like. 

c. To speak, type: 

"your comment here 
and press Return. 

d. At show time, you’ll hear music if your computer is 
equipped with speakers, and the comedy team will fill 
the text half of the chat window, inviting you to partici- 
pate via the Message box. For example, the MetaPlay 
cast will ask the audience for a suggestion to gel the 
show started. 

Argle, the show’s host, may say, “Before we start today’s 
show, would someone please suggest an important piece 
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Above: During a MetaPlay improv 
show\ 2D images of guests ami the char- 
acters at Mom 's get added to the text 
chat. 



of information the Cook finds out today. . Visitors are 
guests in the diner during the show and may jump in with 
a line or two at any time. For example, a guest might 
throw out, “The fi*yer is broken!” Another character 
might add, “Uh, oh. . .soggy fries.” and the plot begins! 

3. Why Pueblo? 

MetaPlay chose a MOO for their perfonnances because 
Moos are programmable. Although they have investigated 
other 3D chat environments, they’ve found that the program- 
mable characteristics help during performances. For exam- 
ple, the perfonners can clear everyone’s screen 
simultaneously and plant text, such as “Meanwhile...” 



4. VRML design issues. 

When you visit Mom’s Truck Stop and experience the VRML 
3D diner, you realize a traditional diner is built on the surface 
of a bowl of soup. The environment is much more enticing to 
explore than a classic room with four walls. VRML allows a 
3D designer to let go of reality and build surpri.ses into the 
surroundings — and you will find surprises navigating 
through Mom’s. 

Live3D’s viewpoints provide a means to display camera 
shots that viewers can access with a right mouse button and a 
pop-up menu. A Control key and a right arrow take a viewer 
through the viewpoints in a slideshow fashion. Much like a 
filmmaker, 3D artist Paul Marino took advantage of Livc3D’s 
viewpoints and has set up several cinematic viewpoints that 
users can access through the Netscape Navigator Live3D 
window. 

In VRML, camera shots are called PerspectiveCamera 
position views. Although 3D applications that write VRML 
files create an opening PerspectiveCamera view, .several 
PerspectiveCamera views may be added to a VRML file. 
{Note: See Open a VRML file in a word processor and alter 
the PerspectiveCamera in this chapter. ) 
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The NYVRMLSIG’s 
Coney Island 
Project 



Summary: SIGs, or Special Interest 
Groups, have helped computer users 
accelerate learning for almost two 
decades. 




Tech tip from 
NYVRMLSIG member, 
Marc Thorner: 




O nce a month, the New York VRML Special Interest 
Group (NYVRMLSIG) meets in the back room at 
Alt.Coffee to discuss the development of VRML and virtual 
worlds on the Web. The group was formed in February 1996 
and attracts industrial designers, architects, and 3D graph- 
ics professionals who want to adapt their knowledge to fit 
the Web. There is no fee to attend the meetings and anyone 
can attend. 



“A pmject like the 
Coney Island VRML site 
is historically signifi- 
cant since it repre.sents 
a radical departure 
from the restraints 
imposed by 1 9th centu- 
ry ideas, and it provides 
a means for 3D design- 
ers to share technical 
information. A.v Mark 
Pesce has said, ' infor- 
mation .shared is infor- 
mation septared.*** 

You can reach Marc at: 
mthomer@pipeline.com. 



Larry Rosenthal and Alex Shamson, both industrial design- 
ers, arc the most technically advanced members. Larry 
Rosenthal, who founded the SIG, is the unofficial chairman 
and the most aggressive user of 3D software. Shortly after 
Larry founded the NYVRMLSIG, he suggested a SIG group 
project. And in March, the members responded by creating 
Marc Thomer’s suggestion of re-creating New York’s Coney 
Island Amusement Park. 

1. Coney Island at the turn of the century. 

At the turn of the century. Coney Island, on the southwestern 
end of Long Island, was the large.st amusement park in tlie 
United States. Amusement parks lured hundreds of thou- 
sands of visitors (some reports say millions) to Coney Island 
by feiry, railroad, electric trolley, subway, hackney carriage, 
automobile, and bicycle. 
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Much like a small city, the original Coney Island was 
arranged around a main promenade called the Bower>' that 
was lined with carnival attractions. Canopied booths intro- 
duced elephants, camels, and “oriental beauties” to resort 
visitors. 

• In 1 897, George Tilyou opened Steeplechase Park, one 
of the three enclosed amusement parks to open at Coney 
Island. Occupying 15 acres. Steeplechase park was lined 
by a gravity-powered steeplechase ride. 

• In 1 902, Frederic Thompson and Skip Dundy, both 
employed by George Tilyou, planned what was to 
become the grandest enclosed park at Coney Island- 
Luna Park, which later opened in May 1903. 

Frederic Thompson was a former architectural student 
who indulged in ornaments, flags, towers, and turrets. 

At night, Luna park was illuminated with a quarter mil- 
lion electric lights. When it opened, Luna Park offered 
visitors a Venetian city with gondoliers, a Japanese gar- 
den, an Irish village, an Eskimo village, a Dutch wind- 
mill, and a Chinese theater. A rocket trip to the moon 
was the most popular attraction. 

• In 1903, Coney Island's third enclosed park rivaled Luna 
Piirk with its massive proportions. Dreamland was 
planned and built by a group of politicians organized by 
William H. Reynolds, a former New York state Senator. 
The designers of Dreamland installed one million elec- 



Ahove: Luna Park Tower at the 
entrance to Luna Park. 
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Above: A statue called The Creation at 
the entrance to Dreamland, 



trie lights and an enormous nude sculpture called The 
Creation at its gates — both meant to overshadow Luna 
Park. 

2. The Coney Island VRML Project. 

Anyone can participate in the Coney Island project. Viilus 
WalkThrough Pro is the recommended software program 
because it is an inexpensive, easy-to-use 3D application 
that can write a VRML file with textures and links. 

The project requires that participants build two models. 
The first model can be any ride, canopied side show, or 
building at Coney Island. The second model is a personal 
trailer that will be placed along Coney Island’s Bowery, 
once the Amusement Park’s main street. The trailer exteri- 
ors will be uniform because the N YVRMLSIG provides a 
template download on the NYVRMLWeb site at 
http://www.cube3.eom/download.s/NYVRMLSIG. Inside, 
each trailer will have the model builder's own world or 
unique space with furniture, textures, or any objects of 
his/her choice. Here are a few recommended steps to get 
acquainted with the Coney Island project: 

a. Visit Larry Ro.senthaPs extruded 3D map of Coney 
Island that contains existing models at http://www 
.cube3.com. This will give you an idea of what models 
have already been created. 

b. Download one or more models from Larry’s site and 
take them apart in Virtus WalkThrough Pro to see how 
they are constructed. 

c- Look for photos and project tips on the NYVRMLSIG 
pages at Larry’s Web site at http://www.cube3.com/ 
downloads/NYVRMLSIB. 

d. Step through the construction of the Luna Park Tower 
in this section to learn about building, scaling, and 
adding texture maps. 

e. Download the trailer template from http://www.cube3 
.com/download.s/NYVRMLSIG to build your own 
room at Coney Island. 
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1 5 feet 
15 feet 



J 



35 feel 



3. Planning a model. 

a. Make a rough sketch of your model on paper to plan 
components and their dimensions. 

b. In this example, the Luna Park Tower is approximately 
1 00 feet high. This is 1 00 inches in Viilus Walk- 
Through Pro. 

4. Open an image or texture in Photoshop. 

a. Open Photoshop. Then, select Open from the File pull- 
down menu. 

b. Select a graphic in the dialog box that follows, and 
click on Open. 




4a. 
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4b. 



c. Your image will open in a Photoshop window. 
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5. Copy/paste a texture to a new document. 

a. Select the Rectangle Marquee tool. 

b. Drag-select an area of a photo you would like to use as 
a texture. 





So. 



c. Select Copy from the Edit pull-down menu. 

d. Select New from the File pull-down menu 





e. The dialog box that follows will display the dimen- 
sions of your selection. Click on OK. 

f. An Untitled new document will be displayed. 
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5f. 

g. Select Paste from the Edit pull-down menu. 
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Above: Luna Park's Venetian city. 
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h. Your seleclion will fill the Uniitled new document. 



6. Resize the texture. 

a. Select Image Size from the Image pull-down menu. 

b. Although I foot= I inch in Virtus WalkThrough Pro, 
you should be very con.ser\^ative when you resize your 
texture. Large texture files will make your model diffi- 
cult to download. 

In this example, although the base of the Luna Park 
Tower will be 35 feet high, enter 15 or 20 in the field 
labeled Height. Photoshop will resize the width pro- 
portionally, and Virtus will resize the texture to fit your 
model. Enter 72 in the field labeled Resolution, and 
click on OK. 

c. The texture will be resized in a Photoshop window. 



I 

Mon ► 

RdJUit > 

rtlcuinlr > 



lup P 
Rolato > 
Ittccit » 




Nltlogrom^. 



»t.|. 



6a. 





7. Save your texture. 

a. Select Save As from the File pull-down menu. 
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Above: Dreamland, the third enclosed 
park to open at Coney Island, was 
never as popular as Luna Park. Many 
feel the architecture was less success- 
ful. Frederick Thompson, the creator of 
Luna Park, thought the '*park*s archi- 
tecture should be a departure from all 
that is traditional.** 



b. In the dialog box that follows, name the texture 
texture_l, and click on Save. 

8. Add the texture to WalkThrough Pro. 

a. Open the WalkThrough Pro software. 

b. Select Textures Window from the Windows pull-down 
menu. 

c. A Textures palette will be displayed. 
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8c. 



d. Select Add Textures from the pop-up menu on the 
Textures palette. 

e. In the dialog box that follows, select texture^l , and 
click on Add. 

f. The texture will be added to the Textures palette. 






8e. 




9. Building a model (the Luna Park Tower). 

Work in a Left or Right View to make drawing easier. 

a. Select New ViewlLeft from the View pull-down menu. 
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9c. 



b. Drag the Observer out of the way before you begin 
your drawing. 

c. Select the Rectangle Tool. 

d. Drag a rectangle to form the bottom portion of the Luna 
Park Tower. 





lOb. 




10c. 



10. Applying textures. 

a. In this example, you’ll add the Luna Park Tower tex- 
ture to the four sides of the tower base. 

b. Select the Tumble Editor Tool. 

c. Click on Luna Park Tower base in the Design View 
window. 

d. A Tumble Editor window will open. 

e. When the Tumble Editor window opens, the Grabber 
Hand Tool will be selected. 



lOe. 
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f . Refer to the Orientation Cube at the base of the Tools 
window and rotate the rectangle to display the four sur- 
faces where textures are to be applied. 

g. Select the Pointer Arrow Tool. 

h. Click on a surface to select it. 

i. Select Textures Window from the Windows pull-down 
menu. 

j. Double-click on the texture labeled texture_l to apply 
the texture to any of the surfaces. 





lOh. 



k. Repeat Steps f through] to apply the texture to four 
sides of the tower base. (Note: You will need to re-select 
the Grabber Hand Tool to wtate the tower base.) 
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I. Click on the Close Box in the Tumble Editor window. 



r honye Ulru> 



Home Idiur 
Nome Obteiori 
r reler Oti*eti*ef 



Ua. 





101 . 

11. View your room in the Walk View. 

As you complete your model, navigate around each compo- 
nent in the Walk View to inspect the texture you applied. 

a. Level the Observer by selecting Level Obsen^er from 
the View pull-down menu. 

b. The line of sight on the Observer will be aligned at a 
3:00 position. 

c- Select New ViewlWalk View from the View pull-down 
menu. 

d. Navigate around your model. 





lid. 
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12. Complete your model. 

Use the drawing techniques described in this section to 
complete the Luna Park Tower. 

a. Plan each section of your model, and copy a texture 
map from a photograph to make your model look 
realistic. 

b. Build each section separately. 

c. As you’re creating each section, access the Top View 
by selecting New ViewITop from the View pull-down 
menu. 

d. With the Top View selected, you can determine if the 
sections of your model are lined up. 




e. Check the Walk View as you complete each section to 
view the appearance of your model. 




12e. 
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13. Save your model. 

a. Select Save from the File pull-down menu. 

b. In the dialog box that follows, name this model 
Liuui.virtus, and click on Save. 




13b. 
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14. Exporting the model as a VRML file. 

a. Select ExportlVRML from the File pull-down menu. 

b. In the dialog box that follows, click on the box labeled 
Include Texture Links. Then, click on OK. 

c. In the dialog box that follows, name the file Lima.wrl, 
and click on Save. (Note: VRML files must end in a 

. WRL file extension.) 
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Alex Shamson’s 
tips on creating 
a VRML model 
in Virtus 

WalkThrough Pro 



Summary: Use Virtus WalkThmugh Pro 
to create a 3D model, and then save it as 
a WRL file for viewing on the Web. 




V/alkThrough Pro 

la. 




A lex Shamson’s dinosaur (“Dino”) is created with 2D 
polygons in the Virtus WalkThrough Pro Design View, 
which then gel edited and colored as 3D objects in the soft- 
ware’s Tumbler Editor. 

1. Open Virtus WalkThrough Pro. 

a. Open Virtus WalkThrough Pro. 

b. An Untilled:Top View window and an UntitledrWalk 
View window will open. (Note: Alex Shamson reconh 
mends saving the model immediately. See Steps 8a and 
8b for details on how to save your model in Virtus 
WalkThrough Pro.) 




lb. 
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2. Change the Design View. 

Design View is where you will draw a 2D image of the 
dinosaur’s head. 

a. Select Change ViewlLeft from the View pull-down 
menu. 

b. The Uniilled.Top View window will change to an 
Untitled DesigniLeft View window. 





3. Begin a 2D drawing of the dino head. 

a. Select the Irreguhu* Object Tool. (Note: The Irregular 
Object Tool is used to draw irregular-shaped polygons 
by clicking on each vertex.) 

b. Move left to right with three successive clicks to begin 
the irregular-shaped polygon, as shown in Figure 3b. 
Follow the grid marking in Figure 3b. and try to make 
your drawing approximately the same size. 

c. Continue to create vertices by clicking to form the poly- 
gon shown in Figure 3b. Finish by clicking on your 
.starting point to close the polygon. The polygon should 
look roughly like a dinosaur skull lacing left. 
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d. The closed polygon will display a black handle at each 
vertex. You may drag on any of these handles to alter the 
polygon’s shape. 

4. Change views, and alter the inflation. 

a. In Virtus WalkThrough Pro, an artist draws in 2D, and 
the object is instantly rendered as a 3D object in the 
Walk View window. 

b. Your ability to see a 3D object in the Walk View window 
is dependent on the position of the Obsen^er. Details on 
how to control the Observer will be presented later. The 
Observer may be dragged out of the way if it’s in the way 
while you’re working with your 2D polygon. 




4a. 
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c. When you draw a 2D shape, you create two dimensions, 
and the missing “third dimension” is referred to as the 
inflation distance. 

The inflation distance is represented as a gray bar in 
each of the rulers along the Design View Window. 

The default value for the inllation distance is eight feet. 
This distance may be adjusted prior to drawing. Follow 
the next steps to check the front view of your object to 
see the model’s proportions. 




d. Select Change ViewlFront from the View pull-down 
menu. 

e. The UntitlediLeft View will change to an Untitled.Front 
View. 

f . You may need to adjust the width of the dinosaur’s head 
in the Front View by dragging on a handle as shown. 1 
dragged a polygon handle in the Front View to make the 
model slightly wider. 




4e. 
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5. Open the object in the Tumbler Editor. 

a. Select the Tumbler Editor Tool. 

b. Double-click on the polygon in your Front View 
window. 





5b. 
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c. A Tumbler Editor window will open. This view will 
allow you to rotate an object in 3D and edit a surface. 

d. When the Tumbler Editor window opens, the Grabber 
Hand Tool will be selected. 

e. Use the Grabber Hand Tool, and try rotating the object 
in the Tumbler Editor window. Notice that, as you 
rotate the object, the orientation cube at the ba.se of the 
Tools window will reflect the object’s position in the 
Tumbler Editor window (T=Top, B=Bottom, F=Front, 
B=Back, L=Lefl, and R=Right). 





di> 
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6b. 6c. 



Tip: The Rotation Constraint Tools will 
help you control rotation when you edit 
objects in the Tumbler Editor window. 



6. Try the Rotation Constraint Tools. 

Rotation Constraint Tools affect how the object in the 
Tumbler Editor window can be rotated. Clicking on a tool 
will cause the tool to become activated. 

You may turn on more than one tool at one time. You will 
know a particular tool is “on” because it will appear shaded. 
At least one tool must be selected at any time. The tools may 
be turned “off” with a second click, causing the shading to 
turn light. 

a. X-Y Motion Tool. This tool allow's rotation in an X-Y 
plane. 

b. X-Z Motion Tool. This tool allows rotation in an X-Z 
plane. 

c. Y-Z Motion Tool. This tool allows rotation in a Y-Z 
plane. 
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Tip: Alex Sham son recommends that 
you always slice in a clockwise direc- 
tion. By doing this, you always lose the 
left side of the slice. 



7. Reshape the head with the Slice Tool. 

Alex used the Slice tool in the Tumbler Editor window to 
taper the front of the dinosaur’s nose. You’ll need to work on 
the model looking down at the dinosaur’s head from a Top 
View. In this position, the nose will be pointing to the bot- 
tom of your screen. 

a. Rotate your model in the Tumbler Editor window so 
that it is oriented with the top and bottom sides, as 
shown in Figure 7a. Refer to the orientation cube at the 
base of the Tools palette for help. 

b. Select the Slice Tool. 

c. Using the Slice Tool, drag a slice down the right side of 
the model, as shown in Figure 7c. 

d. When you release your mouse button, a triangular seg- 
ment will have been “sliced” off, leaving a set of han- 
dles where you placed the slice. These handles allow 
you to edit the slice if necessary. To edit a slice, drag on 
one of the handles. (Note: To edit a slice by its handles, 
you need the Selection Tool.) 
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7c. 7d. 

e. Using the Slice Tool, drag a slice up the left side of the 
model, as shown in Figure 7e. 
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f . When you release your mouse button, a triangular seg- 
ment will have been sliced off, leaving a set of handles 
where you placed the slice. 

g. Taper the nose even further by dragging a slice down the 
right side of the front snout area, as shown in Figure 7g. 

h. Again, a set of handles will remain when you release 
your mouse button. 





i. Drag a similar slice down the left side of the front snout 
area, as shown in Figure 7i. 

j. Again, a set of handles will remain when you release 
your mouse button. 
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k. Your slices have been recorded in the Tool palette. If 
you wish to see where the slices have been placed or if 
you wish to further edit one of the slices, you may 
select a slice by name in the Tool palette window. The 
respective set of handles will then appear in the Tumble 
Editor window. 

l. To taper the end of the dinosaur’s snout even further, 
position your model in the Tumbler Editor window, 
as shown in Figure 71. Use the Orientation Cube 

as a guide. 




m. With the front of the dinosaur’s snout facing away from 
you, drag another slice off the right front of his snout, as 
shown in Figure 7m. 

n. Drag a similar slice off the left front of his snout. 
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O- When you’ve completed your slices, rotate your 
dinosaur’s head to see how the slices have tapered the 
snout. Notice the slices will be listed in the Tool palette. 

p. Put the Tumbler Editor away by clicking on the close 
box in the upper-left corner. 



ibsbcl: 
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8. Save your model. 

If you have not yet saved your model, save it as a Virtus 
WalkThrough Pro file. Later, you will be saving it as a WRL 
file to be viewed on the Web. 

a. Select Save from the File pull-down menu. 

b. In the dialog box that follows, type a file name, and 
click on Save. 
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9. Create the lower jaw from a duplicate. 

Return to the Left View to create the lower jaw, 
create a duplicate, and then open the Tumbler Editor to 
remove the top portion of the head. A remaining lower sec- 
tion will form the lower Jaw. 

a. Select Change ViewlLeft from the View pull-down 
menu. 
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b. A Left View window will be displayed, 
c- Select Duplicate from the Edit pull-down menu. 

d. A duplicate of your model will appear. 

e. Drag the duplicate polygon away from the original, as 
shown in Figure 9e. 





9d. 9e. 
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f. Select the Tumbler Editor Tool. 

g. Double-click on the duplicate polygon in your Left 
View window. 

h. A Tumbler Editor window will open. 




i. When the Tumbler Editor window opens, the Grabber 
Hand Tool will be selected. 
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j. Use the Grabber Hand Tool to orient your model, as 
shown in Figure 9j. Use the orientation cube at the base 
of the Tools palette as a reference. 

k. Select the Slice Tool. 

l. Using the Slice Tool, drag the head from left to right, as 
shown in Figure 91. 

m. When you release the mouse button, the upper portion of 
the head will have been sliced off, leaving a set of han- 
dles where you placed the slice. 

n. You may want to rotate the new lower jaw in the 
Tumbler Editor window using the Grabber Hand Tool. 

o. Put the Tumbler Editor window away by clicking on the 
close box in the upper-left corner. 
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10. Create a neck. 

Create a neck by drawing a new polygon in the Left View 
window. 

a. Select the Irregular Object Tool. 



lOa. 
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10b. 




11a. 



b. Draw a four-sided polygon to form a neck, as shown in 
Figure 10b. 

c. Drag the completed neck polygon to line up with the 
head, as shown in Figure 1 Oc. You may need to drag on 
one of the neck polygon handles so that it lines up prop- 
erly with the dinosaur head. 
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11. Rotate the jaw. 

Alex’s dinosaur has a lower jaw that is open, showing a 
mouth full of teeth and a tongue. In order for the jaw to 
appear open, the lower jaw must be rotated. 

a. Select the Rotate Tool. 

b. Click inside the lower jaw polygon, and drag your 
mouse away from the polygon to the right as shown. As 
you move your mouse with the mouse button held 
down, you’ll notice that the lower jaw segment can be 
rotated. When you are happy with the angle of rotation 
or, when the angle of rotation approximates what is 
shown in Figure 1 lb, let go of the mouse button. 

c. Drag the lower jaw into position, as shown in 
Figure 1 Ic. 





lie. 
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12. Color the dinosaur polygons. 

The surfaces of your polygons may be colored in the Tumble 
Editor or the Surface Editor. Alex chose a bright green shade 
for the dinosaur head and a pink shade for the inside of the 
mouth. 

Start by coloring the dinosaur’s neck. However, before you 
go into the Tumble Editor, check the Front View to see if the 
head and neck are approximately the same width. 

a. Select Change ViewlFront from the View pull-down 
menu. 

b. The Front View window will be displayed. 

c. Adjust the neck polygon width so that it matches the 
width of the dinosaur head in this view. 
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d. Select Change ViewlLeft from the View pull-down 
menu. 

e. The Left View window will be displayed. 

f- Select the Tumbler Editor Tool shown in Figure 1 2f 1 . 
{Note: Alternatively, you may select the Sutface Editor 
Tool shown in Figure 12f2 and follow similar directions 
to color an object in the Surface Editor. ) 
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g. Click on Ihe neck polygon in the Left View 
window. 

h. A Tumbler Editor window will open. 

i. When the Tumbler Editor window opens, the Grabber 
Hand Tool will be selected. 

j. Select the Pointer Arrow Tool as shown. 

k- Click one of the polygon surfaces to select it. 





I. Press and hold down the color bar, drag the pointer to 
select a green, and release the mouse button. 

m. The green you selected will be applied to the surface 
you selected. 

n. Follow Steps] through m to apply green to all of the 
neck surfaces. 




12m. 




12n. 
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o- Open the remaining polygons you’ve created and the 
lower jaw in the Tumbler Editor. Follow Steps g through 
1 to apply green to all but the underside surface of the 
dinosaur’s head and the upper surface of the dinosaur’s 
lower jaw. Apply pink to these two surfaces. 

p. Close the Tumbler Editor window by clicking on the 
close box in the upper-left corner. 
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13. Create horns. 

Alex gave the dinosaur a crown of horns, which he 
colored red. 

a. Select Irregular Object Tool. 

b. Select the Inflate Pointed Modifier Tool. This tool will 
inllate an object with sides that converge to a point. 

c. Draw a three-sided polygon to form a horn polygon, as 
shown in Figure 13c. 

d. Before duplicating the horn, check on the horn’s 
proportions in the Front View window. Select Change 
ViewlFronl from the View pull-down menu. 




13a. 




13b. 
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e. The Front View window will be displayed. 

f> Adjust the horn polygon so that its width is almost as 
wide as the dinosaur’s head. 

g. Drag the horn into position on the right side of the head, 
as shown in Figure 13g. 




h. With the horn still selected, select Duplicate from the 
Edit pull-down menu. 

i. A duplicate horn will appear. 

j. Select the Rotate Tool. 



nww ]iieu» Detiijn ij 
ttndo *i 



[ul »K 




ctoar MK 



Modirg Selectril V 

nil KH 

Unielecl RD 

Hide StleUtd KH 

Uioif nil 

lock Selected KJ 

Unlock HU 

Preteiencec... x; 



I3h. 




VRML World Building 433. 



k. Click inside the horn polygon, and drag your mouse 
away from the polygon to the right. As you move your 
mouse with the mouse button held down, you’ll notice 
the horn can be rotated. Rotate the horn slightly and let 
go of the mouse button. 

l. Drag the duplicate into position on the right side of the 
head. 

m. Repeat Steps h through k to create five more horns, as 
shown in Figure 13m. 





14. Create eyes. 

Alex gave the dinosaur small yellow pyramids for eyes. 

a. Select Change ViewlLeft from the View pull-down 
menu. 

b. The Left View window will be displayed. 

c. Select the Irregular Object Tool. 

d. Select the Inflate Pointed Modifier Tool. This tool will 
inflate an object with sides that converge to a point. 
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e. Draw a ihree-sidcd polygon to form an eye, as shown in 
Figure 14e. 

f. Select Change ViewlFront from the View pull-down 
menu. 

g. The Front View window will be displayed. 

h. Adjust the width of the eye, as shown in Figure 14h. 




14g, 14h. 
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i. Select Change ViewlLefl from the View pull-down 
menu. 




m. Change to the Front View, and position the right eye on 
the right side of the dinosaur’s head. 
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15. Create a tongue. 

Give the dinosaur a dark red tongue. 

a. Select Change ViewlLeft from the View pull-down 
menu. 

b. The Left View window will be displayed. 

c. Select the Irregular Object Tool. 

d. Select the Inflate Pointed Modifier Tool. This tool will 
inflate an object with sides that converge to a point. 
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e. Draw a three-sided polygon to fonn a tongue, as shown 
in Figure 15e. 

f- Select Change ViewlFront from the View pull-down 
menu. 

g. The Front View window will be displayed. 

h. Adjust the width of the tongue, as shown in Figure 15h. 
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i. Select Change ViewlLeft from the View pull-down 
menu. 

j. The Left View window will be displayed. 

k. Drag the tongue into position inside the dinosaur’s 
mouth, as shown in Figure 15k. 




15J, 15k. 
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16. View the model in the Walk View. 

a. Drag the Observer in front of your model, as shown in 
Figure 16a. 

b. The black line in the middle of the Observer should be 
pointing toward the dinosaur. This represents the direc- 
tion of the Obsen'er or the line of sight. 

To manually change the line of sight, position the tip of 
the mouse pointer arrow in the center of the Observ'er, 
hold down the Option key, and click and drag in a new 
direction. A dotted line will appear. Release the mouse 
button, and the line of sight will be repositioned. 

c. Select New Viewl Walk View from the View pull-down 
menu. 




16c. 
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16d, 16e, 16f. 




d. The Walk View will be displayed. 

e. Position your mouse on either side of the center cross- 
hair, and click on the mouse button a few times. This 
action causes you to navigate in the Walk View window 
to the right or to the left. 

(Note: If you position yourmouse to the left of the cen- 
ter crosshair and click, yon will turn left. You will turn 
right if you position yourmouse to the right of the cen- 
ter crosshair and click. If you position your mouse 
above the center emsshair and click, you will move for- 
ward. You will move backward if you position your 
mouse button below the center crosshair and click.) 

f. In the Walk View window, you can see if your model 
needs adjustment. 

g. The background color of the Walk View window may be 
changed by pressing on the Color bar in the Tool palette 
and selecting an alternate color, as shown in Figure 16g. 

h. Alex Shamson changed the background color from the 
default light blue to black. (Note: The dinosaur you see 
in the step-by-step examples is the dino.saur I created for 
this section. Figure I6h is is the dinosaur Alex created.) 
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17. Repositioning the dinosaur’s eyes. 

The Walk View revealed that my dinosaur’s eyes needed to 
' be moved toward the head. The Front View is the best view 
to do this. 

Select Change ViewlFront from the View pull-down 
menu. 

The Front View window will be displayed. 

Click on one of the eye polygons, and press the down 
arrow on your keyboard to move the eye down. 

Repeat this step to move the other eye polygon to line it 
up with the first eye polygon you moved. 

Follow Steps 1 6c and 1 6d to change to the Walk View 
and check on this adjustment. 



17b, 17c. 
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18. Adjust the World Lighting. 

The World Lighting Editor may be used to adjust the light- 
ing on or around your model. The objects you create in 
Virtus WalkThrough Pro have four default light sources. 

One of these is an ambient light source (light from all direc- 
tions simultaneously) and three are directional light sources 
(light from a single direction). 

All of the default light sources have a neutral gray color, 
which may be changed. Lights may be added or deleted, 
turned on or off, and designated as either ambient or 
directional. 

To add brighter light to the dinosaur, change the color of the 
lights from gray to white. 

a. Select New ViewlWorld Lighting from the View 
pull-down menu. 

b. The World Lighting Editor will be opened. 

c. A Lights list, containing the four default light sources, 
will appear in the Tools palette. Each light has a(n): 

• On/OfT switch. Click to turn a light source on or off. 

• Ambient/Directional icon. Click to toggle between 
these two types of light sources. 

• Color bar. Press and hold down the Color Bar to 
select a light color. 

d. To change the light color from gray to white, press and 
hold dow'n the Color bar, drag the pointer to select 
white, and release the mouse button. 
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e. Repeal this step to change the light color of the remain- 
ing lights from gray to while. 

f. To observe the effects of the change in the light color, 
open the Walk View. Select New ViewlWalk View from 
the View pull-down menu. 

g. Note the change in the model. Besides the change in the 
background color, the light is brighter. 




18g. 
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19. Create a duplicate jaw to hold teeth. 

a. Select Change ViewlLeft from the View pull-down 
menu. 

b. The Left View window will be displayed. 

c. Click on the lower jaw to select it. 

d. Select Duplicate from the Edit pull-down menu. 
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e. A duplicate lower jaw will appear. 

f . Use the down arrow key on your keyboard to move the 
duplicate away from your model. 

g. When you’ve moved the duplicate away from your 
model, use your mouse pointer arrow to move the Jaw in 
front of your model. 
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h. Select the Irregular Object Tool. 

i. Select the Inllate Pointed Modifier Tool. 

j. Draw a three-sided polygon to fonn a tooth, as shown in 
Figure 19J. 

k. Select Change ViewlFront from the View pull-down 
menu. 

l. The Front View window will be displayed. 

m- Adjust the width of the tongue, as shown in Figure 19m. 
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n. Select Change ViewlLeft from the View pull-down 
menu. 

o. The Left View window will be displayed. 

p. Drag the tooth and line it up on the jaw, as shown in 
Figure 19p. 
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q. With the tooth .still .selected, select Duplicate from the 
Fdit pull-down menu. 

r. A duplicate tooth will appear. 



s. Move the duplicate tooth and line it up on the Jaw, as 



shown in Figure 19s. 




19r. 
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t. Reselect Duplicate from the Edit pull-down menu. 

u. A new duplicate will appear and Virtus WalkThrough 
Pro will remember where you moved the original. 

V. Continue to select Duplicate from the Edit pull-down 
menu until you have filled in the jaw w'ith teeth, as 
shown in Figure 19v. 





20. Adjust the teeth in the Top View. 

a. Select Change ViewlTop from the View pull-down 
menu. 

b. The Top View will be displayed. 





c- Drag a selection marquee around the teeth, as shown in 
Figure 20c, and then let go of the mouse. 

d. When you release the mouse, the teeth will display 
selection handles, indicating that they are selected. 

e. Drag the teeth inside the jaw, as shown in Figure 20e. 






f. Move the front teeth around to the front of the Jaw, one 
at a time. To do this, click on a tooth, and move it to the 
left using the left arrow key on your keyboard. 

g- Use the drag-select and duplicate techniques presented 
in this section to create a row of teeth on the right side 
of the Jaw. 

h. When you have completed a full set of teeth using the 
Jaw as a guide, move the Jaw away from the teeth, as 
shown in Figure 20h. 
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21. Group the teeth. 

a. Drag a selection marquee around the teeth, and then let 
go of the mouse. 

b. When you release the mouse, the teeth will display 
selection handles, indicating that they are selected. 

c- Select Group from the Design pull-down menu. 

d. The teeth will become one object, and tlie new object 
will be SLiiTounded with a new set of .selection handles. 
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e. Select Change ViewlLeft from the View pull-down 
menu. 

f. The Left View will be displayed. 

g. Select the duplicate jaw. 

h. Press the Delete key on your keyboard to delete the 
duplicate jaw. The jaw was u.sed as a guide to create 
teeth and is no longer needed. 
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i. Select the teeth, which are now one object. 

j. Select Duplicate from the Edit pull-down menu. 

k. A duplicate set of teeth will appear superimposed on the 
original. 
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I. Move the new duplicate set of teeth away from the 
original. 



m. Drag the duplicate set of teeth into the dinosaur’s mouth, 
as shown in Figure 2 1 m. 





22. Rotate the original set of teeth. 

a. Select the Rotate Tool. 
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b. Click inside the grouped object, and drag your mouse 
down and to the left. As you move your mouse with the 
button held down, youMl notice that the teeth can be 
rotated. 

c. Rotate the teeth so they are facing down, as shown in 
Figure 22b. You may need to rotate the teeth a few times 
to get them to line up horizontally. 
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d. Select Change ViewITop from the View pull-down 
menu. 

e. The Top View will be displayed. 

f. Select the Rotate Tool. 

g. You’ve rotated the teeth in the Left View so that they 
point down. Now, rotate the teeth so that the set faces in 
the same direction as the top row. Click inside the 
remaining set of teeth, drag your mouse to the right, and 
rotate the row so that it faces the opposite direction. 
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23. Drag the upper teeth inside the mouth. 

a. Drag the duplicate row of teeth inside the dinosaur’s 
mouth, as shown in Figure 23a. 

b. Select New ViewlWalk View from the View pull-down 
menu. (Note: See Steps 1 6a and 16b in this section for 
details on how to position the Observer. ) 

c- The Walk View will be displayed. Both rows of teeth 
have extra teeth that need to be deleted. 




23b. 



23c. 





24a. 



24. Deiete extra teeth. 

a. Select Change ViewlLeft from the View pull-down 
menu. 

b. The Left View will be displayed. 

c. With the upper row of teeth selected, select Ungroup 
from the Design pull-down menu. 

d. Although individual handles may not appear around 
each tooth, you’ll discover that the teeth are no longer 
one object by clicking on one of the rear teeth. 




24b. 



24d. 
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e- Click to select individual teeth, and press the Delete key 
on the keyboard to remove the extra teeth. 

f- Repeat Step 24c to ungroup the lower set of teeth. 

g. Click to select individual teeth along the lower jaw, and 
press the Delete key on the keyboard to remove extra 
teeth. 




24f. 



24g. 




h. Select New ViewlWalk View from the View pull-down 
menu. 

i. The Walk View will be displayed. 




24i. 
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25. Resave your model. 

a. Select Save from the File pull-down menu. 
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b. Your file will be updated. 

26. Export the model as a VRML file. 

a. Select ExportIVRML from the File pull-down menu. 

b. In the dialog box that follows, click OK. (Note: The 
dinosaur has no textures.) 

c- In the dialog box that follows, type a name with a WRL 
extension, and click on Save. 

d. A file-writing status bar will appear as the .WRL file is 
written to your hard drive. 




26b. 




26c. 
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Open your WRL 
file in a VRML 
browser 

Summary: Use the Virtus Voyager pen your WRL file in a browser that can see VRML 

VRML browser to open your WRL file. files. Examples include Netscape Navigator with 

Live3D plug-in, the Virtus Voyager browser, or Brad 
Anderson’s ExpressVR browser. SGI has announced that 
they intend to provide a version of their Cosmo browser for 
the Macintosh. {Note: The dino.wrl model in this example is 
available on the book *s companion CD-ROM. The model 
was created by Alex Shamson ofVRmill, Inc. Look for his 
site at http://www.vrmill.com.) 




dino.wrl 




Voyager E2 68k 



1. Open a VRML file in Virtus Voyager. 

a. Open the Voyager software that corresponds to your 
hardware (Macintosh PowerPC or 68 K Macintosh). 

b. The Voyager browser window will open. (Note: Look 
for the Virtus Voyager browser on the companion 
CD-ROM. The Voyager browser may be iLsed as a 
standalone application, or it may be configured as a 
Netscape helper appplication. ) 

c- Select Open File from the File pull-down menu. 
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d. In the dialog box that follows, open a WRL file and 
click on Open. 

e- The VRML model will open in the browser window. 




lo. 





2c. 



2d. 




2. Navigate your VRML file. 

a. Press on the Forward navigation button to move 
forward. 

b. Press on the Backward navigation button to move 
backward. 

c. Press on the Left navigation button to move left. 

d. Press on the Right navigation button to move right. 

e. Press on the Up navigation button to move up. 

f- Press on the Down navigation button to move down. 

g. Press on the Home navigation button to reposition the 
model to its opening position. 
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Open a VRML 
file in a word 
processor and 
alter the 
Perspective- 
Camera 



Summary: Follow this example to 
change the PerspectiveCamera node \s 
parameters by making changes to a WRL 
file in a word processor. 




dino.-^^rl 



M any people who create VRML models use a word 

processor to create “hand coded” VRML. These files 
and the files you export from a 3D application program are 
text files that may be opened and modified in a word 
processor. 

As VRML changes, hand coding provides a means to make 
changes in a VRML model that applications may not be 
able to add. In this example, changes in XYZ position val- 
ues in the PerspectiveCamera node parameters will alter the 
position of the dinosaur head when the model opens. 
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la. 



1. Open a VRML file in a word processor. 

a. Open Microsoft Word or some other word processor. 
(Note: SimpleText may be used, although the software's 
document size is limited, and some VRML models may 
not open.) 

b. Select Open from the File pull-down menu. 

c. In the dialog box that follows, select a WRL file, and 
click on Open. 
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PerspectiveCamera 

positions 




2b. 




2d. 



d. The WRL file will open in a document window. 

e- The file may not have a neat column of VRML code 
that you’d expect it to have. For example, the VRML 
code you’re looking for is most readable in the column 
format: 

PerspectiveCamera { 

position -14.7574 -5.9690 -1.3716 //SFVec3f 
orientation 0 1 0 4.4438 y/SFRotation 
focal Distance 2 //SFFloat 

heightAngle 1.0486 



Although the text file looks scrambled in a Microsoft 
Word window, it does not need to be cleaned up or 
formatted. 

2. Change the XYZ position values. 

a. The XYZ position values in the file that opens are: 

-1.8034 

-0.1524 

3.3528 

b. These values correspond to the location of the camera. 
See Figure 2b. 

c. To reposition the cameras entry view, change these 
values to: 

1.2034 

-.5524 

3.3528 

(Note: The Netscape Navigator browser window with 
LiveSD has a pop-up menu that accomodates several 
PerspectiveCamera position views. These extra camera 
position views are an example of VRML that needs to be 
hand coded.) 

d. The new XYZ values correspond to the position of the 
camera view. See Figure 2d. (Note: The dinosaur's 
head does not move; the camera does.) 
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3. Save your WRL file and view changes. 

a. Select Save As from the File pull-down menu. 

b. In the dialog box that follows, select Text Only from the 
Save File As Type pop-up menu. 




3b. 



c. Alter the file name by adding an alphanumeric charac- 
ter, make sure the file has a WRL extension, and click 
on Save. 




3c. 

d. Follows Steps la through le in the previous section to 
view the position changes. 

4. Create a Camera Switch (a LiveSD option). 

Live3D’s viewpoints provide a means to display several 
camera shots that you can access through the View pop-up 
menu in the Netscape Navigator window. To write these 
extra viewpoints into a VRML file, you’ll need to create a 
Camera Switch node. You can then add as many viewpoints 
as you’d like. 

a. The following example is from Alex Shamson’s 
Plaza.wri file, which can be viewed at his Web site 
(http://www.vrmill .com). Each new viewpoint’s 
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description follows each line, beginning with DEF. 
(Note: Viewpoint descriptions appear in the Live3D 
pop-np.) A\gx Shamson warns that spaces between 
words in a description are not allowed. For example, 
notice he has closed the space in Entry View and 
LeftRear: 

DEF Cameras Switch I 
whichChild -1 

DEF EntryView Perspecti veCamera { 

position 0 3.6 159 y/SFVec3f 

orientation 1 0 0 0.2 //SFRotation 

focal Di stance 678.69 #SFFloat 

heightAngle 1.3 

} 

DEF LeftRear Perspecti veCamera [ 
position -80 5.5 25 
orientation 0 10 4.5 //SFRotation 
focal Di stance 678.69 
heightAngle 1.3 

) 

DEF Bi rd'sEyeView Perspecti veCamera { 
position 70 50 15 
orientation 0 10-4 y/SFRotation 
focal Distance 500 
heightAngle -3 

) 

DEF Di rectoryPanel Perspecti veCamera { 
position -10 4 45 
orientation 0 10-6 y/SFRotation 
focal Distance 500 
heightAngle -3 
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Embed a VRML 
window in a 
Web page 

Summary: Use the <EMBED> tag to 
add a VRML ftle to a Web page. 



Tip: The BBS ColorEditor has moved a 
few times. If you have tmuble finding the 
site, visit the Alta Vista seaivh engine at 
http://www.altavista.digital.com. Do a 
search on ColorEditor for HTML. Do 
not include a space between Color and 
Editor. 




V RML files can be added to a Web page using the 

<EMBED> tag. This tag defines an inline window that 
is part of the page. 

1. Create an HTML document. 

a. Open SimplcText or your word processor. If you use 
a word processor, be sure to save the text as Text Only. 

b. Create a new HTML document. Start a new document 
with the following markup tags: 

<HTML> 

<HEAD> 

<TITLE> Alex’s dinosaur 
</TITLE> 

</HEAD> 

c. Create a body tag, and add color attributes. Adding 
color to a Net.scape background requires placing a hexa- 
decimal red-green-blue triplet in the body tag. Best 
Business Solutions’ Color Editor provides an online tool 
to locate a hexadecimal triplet for your page at 
http://uccnitk.edu.tw/html.courses/colorEditor.htmI. 

<HTML> 

<HEAD> 

<TITLE> Alex's dinosaur 
</TITLE> 
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</HEAD> 



<BODY B6COLOR-”#000000**> 
d. Add a <CENTER> tag 
<HTML> 

<HEAD> 

<TITLE> Alex's dinosaur 
</TITLE> 

</HEAD> 

<B0DY BGC0L0R-"//000000"> 

<CENTER> 

e- Add an <EMBED> tag. In this tag, the width and 
height of the embedded VRML window is defined in 
pixels. In this example, the width is 400, and the height 
is 300. 

<HTML> 

<HEAD> 

<TITLE> Alex's dinosaur 
</TITLE> 

</HEAD> 

<B0DY BGC0L0R-''//000000"> 

<CENTER> 

<EMBED SRC-"dino.wrl" WIDTH-400 HEIGHT-300> 

</CENTER> 

f. Add the ending tags. 

</B0DY> 

</HTML> 

g- Save the file. Save the document in SimpleText or 
your word processor. If you’re working in a word 
processor, save the text as Text Only. Give the file an 
.HTM extension. 

h- Test the frame document. Open Netscape or 
Microsoft’s Internet Explorer browser. Open your 
document by selecting Open File from the File pull- 
down menu. 
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2. Summary of HTML tags used in this seirtion. 

The tags you see in this list (in alphabetical order) reflect the 
HTML 3.2 specification. 

<BODY>...</BODY> 

A tag used to open and close the body of a document. 
This tag uses the BGCOLOR=#RRGGBB or hexadeci- 
mal red-green-bluc triplet attribute, which adds color to a 
browser page. For example: 

<B0DY BGCOLOR-y/000000> 

<CENTER>...c/CENTER> 

A tag used to center elements on a page. 

<EMBED> 

A tag used to add an embedded object to a Web page. 

This tag uses the SRC attribute, which repre.sents the 
name of the source data. This tag also uses the WIDTH 
and HEIGHT attributes to indicate the width and height 
of an object in pixels. For example: 

<EMBED SRC-”dlno.wrl" WIDTH-400 HEI6HT-300> 

<HEAD>...</HEAD> 

A tag used to open and close the header portion of a 
document. 

<HTML>...</HTML> 

A tag used to open and close an HTML document. 
<TITLE>...</riTLE> 

A tag used to describes the title of a document, which 
shows up inside a brow'ser’s title bar. 




Artist featured in 
this chapter 

Frank DeCrescenzo is 
a graphic designer at 
Simon & Schuster in 
New York C/r>' ond a 
new media artist spe- 
cializing in Web site 
design, 3D animation, 
and digital video. He is 
also a musician with the 
band Mantus. 

frankjdecrescenzo @ 
prenhall.com 

http: //members, aol. com/ 
flatsticks/splash. html 
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Forms 

A Web page form is an advanced feature because it requires 
a user to type data into the form’s fields, select from multi- 
ple-choice-type data fields using radio buttons, or drag- 
select from multiple-choice-type data in pop-up menus. 
These responses must then be routed from the Web page to 
some destination on the Internet. The designer who builds 
the form must either create a strategy for routing the data or 
turn this task over to a programmer. Typically, data is routed 
from a form to some destination with a CGI script (Common 
Gateway Interface) written in a computer language such as 
PERL, Java, or C++. 

In this chapter, new media artist Frank DeCrescenzo demon- 
strates how to design a form using NetObjects Fusion. The 
routing of data is handled with a simple MAILTO command 
and avoids the use of CGI scripts. By using a MAILTO, the 
designer who creates the form may have the form data 
mailed to an email address. Even though this method is the 
least sophisticated technique for routing form data, it’s 
generic enough for any Web ser\'er. {Note: For details on 
CGI directory access, see Before you design a form for your 
Web site. . ..) Special thanks to Web specialist Peter Chowka 
for his tips on how to use a MAILTO to route form data. 




The Slappers 
Web site 



Summary: Learn how to design a 
Web site with a form by following 
Frank DeCrescenzo's stef>by-step 
example. 






S lappers are Hal drumsticks created by percussionist 
Billy Amendola. Billy and Frank DeCrescenzo arc both 
members of a New York City-based band called Mantas. 
{Note: Readers who wish to follow Frank ’5 sample step-by- 
step may look for both art and text files on the companion 
CD-ROM.) 



1. Overview. 

This chapter presents readers with the techniques used to 
create a form with NetObjects Fusion. Visit http://www 
.netobjects.com to download a 30-day trial copy of the 
software. 



Above: The site \\ Where page contains 
a form. 

Above Right: The Slappers homepage. 



Forms \ 463 . 





2a. 




2b. 




2c. 



2. The site’s structure. 

The structure Frank designed for the Slappers site is a simple 
hierarchy. 

a. Splash page. When visitors load the first Slappers page 
into their browser, the first thing that appears is a GIF 
animation of a rotating 3D logo. 

b. Home page. Frank’s home page contains a transparent 
GIF image of the Slappers drumsticks and an image map 
panel. 

c. Who. Frank’s Who page includes background informa- 
tion about Billy Amendola, who developed the Slappers 
drumsticks. Included are endorsements from fellow 
artists and magazines, such as Drum!, Modem 
Drummer, and Rip Magazine. The Who branch contains 
another branch to a Mantus page, which in turn contains 
details about Frank’s band. 

d. How. The How page explains how to use Slappers drum- 
sticks. Tlie links on this page load QuickTime video 
demonstration clips. 

e. Where. This page answers the question, “Where can I 
get them?” Frank’s form is included on this page. 
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f- Hot Links. This page contains links to related percus- 
sion pages on the Web. 

3. Image maps as a navigation device. 

Frank chose image maps as a navigation device. He designed 
image map panels containing percussion instrument icons 
for each of the pages. These include a full drum set, a set of 
cow bells, a timbale, and a set of bongos. 

a. Home page. Frank’s icons on the home page are all 
visible, and they’re clickable hotspots that branch to 
related Web pages. 

b. Branch pages. On a branch page, a related icon is a 
ghosted representation of the original. This is a visual 
device meant to confirm that the user is on the right page. 

4. Data collection with forms. 

Frank’s form on the Where page collects personal data such 
as name, address, city, state, ZIP, country, and email. He has 
also created fields for a business transaction for visitors who 
wish to purchase a set of “Slappers.” 
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Using 

NetObjects Fusion 
to create a 
ciient-side 
image map 

Summary: Form design in NetObjects 
Fusion couldn be simpler. To down- 
load a 30-day trial version of the soft- 
ware, vi.dt littp:/Avw^w\netobJect.s. com. 



NetObjects 

FUSION 

Version 1 .0 



01996 NetObjects, Inc. All Rights Reserved 



N etObjects Fusion is a wonderful tool for designers 
who do not want to write HTML tags. This simple 
introduction uses single-line text fields for data entry. 

For details on how to add multiple-line text fields, radio 
dials, checkboxes, and combo boxes, visit the NetObjects 
Web site at http://www.netobjects.com and download the 
software’s documentation. To follow this step-by-step sam- 
ple, look for related art and text files on the companion 
CD-ROM. 






Ni?iObiecis Fusion 

la. 




1. Start NetObjects Fusion. 

The step-by-step sample in this section assumes you have 
learned the basic Web page techniques using NetObjects 
Fusion presented in Chapters. 

a. Start NetObjects Fusion. 

b. A New site dialog box will appear on your screen. 
(Note: If the New^ Site dialog box did not appear, select 
New' Site from the File pull-down menu.) 

c. Type a name for your site in the field labeled Site Name 
at the top of the New Site dialog box, and click on OK. 
The site name will serve as a file name, which is given 
an .NOD extension. The site name will also be used as 
the subfolder name that stores the NOD file and the 
site’s assets. (Note: See Chapters for details on how to 
create a path to your pwject folder if you do not want 
your file to be .stored in the NetObjects Fusion folder. ) 
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New page button 





d. A NetObjects Fusion Site view will be displayed. (Note: 
The Site view will be where you create pages and a 
structure for your site.) 

e. (Option) Review Chapter 3 to learn about NetObject 
Fusion’s preferences and selecting a browser to preview 
your Web pages. 

2. Create Web pages and label them. 

a. In NetObjects Fusion’s Site view, locate the New Page 
button at the top of the screen. Notice tlie Home Page 
icon is highlighted, indicating that it is selected. 

b. For the Slappers site, Frank created a preliminary' splash 
page that contains a small GIF animation, a home page, 
and four principal branches named Who, How, Where, 
and Hot Links. The Mantus page, which branches from 
the Who page, is devoted to Frank’s band. 

Follow Figure 2b to create these pages. (Note: Review 
Chapter 3 for details on how to create pages and label 
them.) 

3. Change views and add art to a page. 

The NetObjects Fusion Page view is the layout area where 

Web pages are created. 

a. Double-click the Slappers page in the Site view to go to 
the Slappers Page view. 




3a. 
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Default page banner 



Default navigation buttons 



b. NetObjects Fusion's Page view will be displayed. 

Notice the screen contains a default page banner labeled 
Stoppers, 

c. Select the Selection Tool. 

d. Use the Selection Tool to select the default page banner. 
Delete the default page banner by pressing the Delete 
key. Also, delete the default navigation buttons in the 
page footer. 

e. Use the Selection Tool to drag the page divider that sepa- 
rates the header from the body and move it up to make 
more room. Also, drag the page divider that separates 
the footer from the body and move it down. 





f- Select the Picture Tool. 

g. Draw picture boxes on the Slappers page, as showm in 
Figure 3g. Import Frank’s art into these boxes. (Note: 
Review Chapter 3 for details on how to impon art into 
picture boxes,) 
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4a. 




4b. 



4. Add text to a page. 

a. Select the Text Tool. 

b. Draw a text box, as shown in Figure 4b. 

c. Launch SimpleText. 

d. Open the text file named Welcome.txt in SimpleText. 

e. Copy the text, and paste it into the NetObjects Fusion 
text box, as shown in Figure 4e. 

f. Add boldfacing and center the text, as shown in Figure 
4f. (Note: Review Chapter 3 for details on how to center 
text and add boldfacing. ) 




SimpleText 



4c. 




4d. 
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File name: Welcome.txt 
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Rrst text box 

RIe name: Welcome.txt 



Second text box 

RIe name: the only place.txt 




Rrst text box 



Second text box 

\ 



Third text box 

RIe name: text links.txt 



g. Create a second text box, open a text file named the only 
place.txt in SimpleText, copy the text, and paste it into 
the NetObjects Fusion text box. 

h. Center the text, as shown in Figure 4h. 

5. Lengthen the page. 

a. Click on the Layout tab in the Properties dialog box to 
select the Layout page. 

b. In the field labeled Width, type: 

800 

In the field labeled Height, type: 

800 

Press Return. 




c. The page will be lengthened, giving you more space to 
create another text box. 

6. Add more text. 

a. Create a third text box, open a text file named text 
links.txt in SimpleText, copy the text, and paste it into 
the NetObjects Fusion text box. 

b. Insert a line break after the words Hot Links, and center 
the text, as shown in Figure 6b. (Note: Review Chapters 
for details about line breaks.) 
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7. Add a tiled background. 

Frank created embossed tiles in Photoshop using the instru- 
ment shapes he used to create the image map panel. He dupli- 
cated the tiles and added colors to match the page color 
schemes. 

a. Click on the Picture radio dial on the Layout page of the 
Properties dialog box. 




Picture radio dial 



7a. 



b. In the dialog box that follows, select the file named 
Purple_bkgrd.gif, and click on Open. 

c. Your tile will fill the back of the page in the Page view to 
form a wallpaper pattern. 
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8a. 



m 













8b. 



8. Create an image map. 

a. Double-click the Picture Tool. 

b- A set of secondciry Picture tools will appear at the base 
of the Toolbox. 

c. Click to select the Rectangle Hotspot tool. 

d. Drag a rectangle over the drum set in Frank’s image map 
panel. 

e. When you release the mouse button, a Link dialog box 
will be displayed. Type the name of the page you would 
like to link to in the field labeled Page Name, and click 
on Find. {Note: Review Chapters for details on page 
links, smart links, and external links.) 




8c. 




8d. 





8f. 




eg. 



f. A dialog box will appear with the message Successfully 
linked to Who Page. Click on OK. 

g- Repeal Steps 8a through 8f to create hotspot boxes 
around the remaining percussion icons in Frank’s image 
map panel. A set of rectangles will be visible when you 
have completed the set of rectangular hotspots. 
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Before you design 
a form for your 
Web site... 



Summary: Before you design a form, 
determine where the form data will be 
sent. 




B efore you design a form for your Web site, develop a 
strategy for routing the data from the form to some 
destination on the Internet. 

1. Options for routing data. 

a. A CGI script to route data to a text file. Several differ- 
ent types of CGI scripts may be used to route the data 
that’s entered on your form to some destination on the 
Internet. Many scripts write fomi data to a text file on the 
Web ser\'er. These scripts may be custom- written in 
computer languages such as Perl, Java, or C++. 
Alternatively, you may consider using a CGI script that 
exists in the public domain. For example, visit the 
Dreamcatchers site at http://dreamcatchersweb 
.com/scripts to download a form script. Most CGI scripts 
are created for Unix Web serv'ers, and this strategy also 
assumes that you have access to the CGI-BIN or the CGI 
folder on the Web server you’re using. 

Contact your Internet service provider and inquire 
whether you have access to the server’s CGI directory. 
Access may be allowed to commercial account users and 
not users with personal accounts. 

b. A CGI script to route data to a database. If you run 
your own server or you rent from an ISP that is willing to 
allow you to mn software on the server, consider setting 
up a database software program that will store the form 
data. For Macintosh users, FileMaker from Claris 
Corporation is an easy-to-use option. Everyware 
Development Corporation’s Tango for FileMaker will 
create a CGI script to route form data from your Web 
page into FileMaker. {Note: Claris is planning to add 
increased Web functionality to FileMaker in the next 
release. Watch fortius development.) 



c- MAILTO. Using a MAILTO command to route data 
allows you to avoid the use of a CGI .script. U.se the fol- 
lowing tags if you are creating your own HTML tags: 

<F0RM METHOD-POST ACTI0N-”MAILT0: 
your_e-mai 1 ©address . com”> 



<P> 
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Name <INPUT TYPE-"TEXT” NAME-”NAME”> 



<P> 

Address <INPUT TYPE-”TEXT” NAME-‘*ADDRESS'*> 

<P> 

City <INPUT TYPE-”TEXT" NAME-"CITY”> 

<P> 

State <INPUT TYPE-"TEXT” NAME-”STATE"> 

<P> 

Zip <INPUT TYPE-”TEXT" NAME-”ZIP”> 

<P> 

Country <1NPUT TYPE-’'TEXT” NAME-"COUNTRY”> 

<P> 

E-mail <INPUT TYPE-”TEXT” NAME-”EMAI L"> 

<P> 

<INPUT TYPE-”SUBMIT” VALUE-”SUBMIT F0RM”> 

<P> 

<INPUT TYPE-PRESET" VALUE-"CLEAR F0RM”> 

</F0RM> 

{Note: Format the form as a table to create even 
columns.) 

2. Examples of commercial ISP service in NYC. 

a. alt.cofTee. This Internet caf«6 in New York’s East Village 
is also an Internet provider. Owner John Scott is the 
Webmaster and offers commercial Web accounts (no 
personal PPP accounts). Included in a commercial 
account is a private CGI directory (CGI-BIN) where 
customers can place a CGI script. The alt.coffee 
commercial services include: 

Single Commercial Web Account: 

• S 1 00 per month, $ 1 00 setup fee 

• 1 virtual domain (IP address on host machine) 

• 1 email account with multiple aliases (S 10 each 
additional per month) 



• 20 MB of storage space ($.50 each additional per 
month) 

• 1 FTP account ($ 1 0 each additional per month) 

• 1 private CGI-BIN directory 

• 500 MB of data transfer per month (S. 1 0 each 
additional per month) 

• 1 monthly statistics report ($10 each additional per 
month) 

• Weekly tape backup 

• SSL secure server (must provide own certificate) 

• FullTl direct to Netcom’sT3 backbone 

• ISDN redundant backup line 

Developer *s Discount: 

• 4 Commercial Web accounts for $300 per month, 
$300 setup fee 

Contact: John Scott, 212.529.2233, 

jetsam @ flotsam, com 

b. The Internet Channel. The Internet Channel is one of 
New York’s larger Internet providers, offering personal 
PPP accounts and commercial Web accounts. A small 
library of CGI scripts is available to users with personal 
PPP accounts, but users cannot upload their own CGI 
scripts to the serv'er. A commercial Web account does 
include a private CGI directory (CGI-BIN). Call for cur- 
rent prices. 

Contact: Beth Haviland, Director of Technical Support, 
212. 243. 5200, support @ inch, com 
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Using 

NetObjects Fusion 
to design a form 
(with a MAILTO for 
routing data) 




F ollow this slep-by-step sample if you have completed 
the previous section. Review basic NetObjects Fusion 
Web page creation techniques in Chapter 3 before starting 
this section. Readers who wish to follow this example 
should look for Frank DeCrescenzo’s art and text files on 
the companion CD-ROM. 

1. Change views. 

a. If you have completed the previous sample, switch to the 
Site view by clicking on the Site button. 




la. 
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b. In the NetObjects Fusion Site view that follows, double- 
click the Where page to go to the Where Page view. 

c. (Option) Alternately, you may select Go To from the Go 
pull-down menu. 

d. (Option) If you selected Go To from the Go pull-down 
menu, type Where in the field labeled Go To, and click 
on OK. 

e. The Where Page view will be displayed. 
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2. Change the page size. 

a. Click in the Width field on the Layout page of the 
Properties dialog box, and type: 

1066 

b. Click in the Height field on the Layout page of the 
Properties dialog box, and type: 

1066 



1 
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stretch radio dial 




3a. 



3. Add art to the page. 

a. Select the Picture Tool. 

b. Draw picture boxes on the Web page, as shown in Figure 
3b. Import Frank’s art files into these boxes. 



Picture tab 






4c. 



File name: Silver_head.gif 




4. Scale an image. 

The Slappers button needs to be scaled proportionately so 
that it is a smaller button. 

a. Because you have been working with picture boxes, the 
Picture page on the Properties dialog box should be 
selected. If it is not selected, click tlie Picture tab at the 
top of the dialog box to select the Picture page in the 
Properties dialog box. 

b. Click to select the Stretch radio dial. 

c. Hold down the Shift key and drag the lower-right 
handle on the Slappers button. Move your mouse up and 
to the left to scale the Slappers button. This will create a 
smaller button. 
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RIe name: Wherejntro.text 



5. Add text. 

a. Select the Text Tool. 

b. Draw a text box, as shown in Figure 5b. 

c. Launch SimpleText. 




SimpleText 



5c. 



d. Open a text file named Wherejntro.text, copy the text, 
and paste it into the NetObjects Fusion text box, as 
shown in Figure 5d. 

e. Create a second text box, open a text file named,// e/r/.v./A7 
in SimpleText, copy the text, and paste it into the 
NetObjects Fusion text box, as shown in Figure 5e. 




File name: fields.txt 




6a. 



6. Create single-line text fields. 

a. Double-click the Form Tool. 
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a 
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6b. 



C^: 

6c. 



b. A set of secondary form tools will appear at the base of 
the Toolbox. 

c. Click to select the Single-line Form Tool. 

d. Draw a fonn text box, as shown in Figure 6d. {Note: 
Although you 7/ tieecl a long text box for this field, the 
length will need to he controlled fivm the Properties dia- 
log box.) 




6d. 




6e, 6f. 



e. When you draw a single-line text field, the Single Line 
page on the Properties dialog box is displayed. Label 
each of the single-line text fields numerically. In the 
field labeled Name, type: 

1 

f- Drag-select the number in the field labeled Visible 
Length, and type: 

38 

Drag-select the the number in the field labeled Max 
Length, and type: 



38 

Press Return. 
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6g. 

Tip: Use the arrow keys on your key~ 
hoard to position a single-line text field. 
To align the fields, select the Selection 
Tool, drag a marquee around the fields, 
and select Align Elements/Left from the 
Page pull-down menu. 



g. The length of the text box will change in response to the 
new field length numbers you entered in the Properties 
dialog box. 

h. Repeat Steps 6a through 6e to create six more single- 
line text fields, as shown in Figure 6h. Label them 2, 3, 
4, 5, 6. and 7. 







6h. 
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7. Create a Submit button. 

A Submit button functions to submit form data. Although 
Frank’s forai contains several more fields, the Submit button 
will be added here for the purpose of this example. 

a. Double-click the Form Tool. 

b. A set of secondary Form tools will appear at the base of 
the Toolbox. 

c- Select the Button tool, 
d. Draw a Button box. 



7d. 
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e. When you draw a button, the Button page on the 
Properties dialog box will be displayed. In the field 
labeled Name, type: 

Submit 

f. Select the Text radio dial, and in the field next to the 
radio dial, type: 

Submit 

g. The button you create will contain the word Submit in 
response to your typing. (Note: You can use your own 
button image by selecting the Image radio dial, clicking 
on the Select button, and selecting an image fmm your 
hard drive.) 




7g. 



h. Select the Submit radio dial. 




8a. 
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8b. 



a 



8c. 



8. Create a Reset button. 

a. Double-click the Form Tool. 

b. A set of secondary Form tools will appear at the base of 
the Toolbox. 

c. Select the Button Tool. 

d. Draw a Button box. 



8d. 
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e- When you draw a button, the Button page on the 
Properties dialog box will be displayed. In the field 
labeled Name, type: 

Reset 

f. Select the Text radio dial, and in the field next to the 
radio dial, type: 

Reset 

g- The button you create will contain the word Reset in 
response to your typing. (Note: You can use your own 
button image by selecting the Image radio dial, clicking 
on the Select button, and selecting an image from your 
hard drive.) 




8g. 

h. Select the Reset radio dial. 




9. Assign a MAILTO action to the form. 

A NetObjects Fusion page can contain one form. You may 
have noticed a Form Settings option each time you accessed 
the Properties dialog box while you were building the form’s 
fields. Even though you have access to the Settings option 
each time you build a field, you only need to fill it in once for 
the entire form. 

a. Select the first text field you created for your fonn. 
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b. When you select any single-line text fields on your form, 
the Single Line page on the Properties dialog box will be 
displayed. 

c. Click on the Settings button. 

d. In the Form Settings dialog box that follows, click in the 

field labeled and type: 

mail to: <your_ema1 l@address . com> 

Click on OK. 






9c. 




10. Publish your site. 

Follow the directions for publishing a site in Chapter 3. 

11. Test your form. 

Your form will need to be tested online. Move your newly 
published pages to your Web site with the FTP client that is 
built into NetObjects Fusion or use Jim Matthews’ Fetch. 
Fetch is a Macintosh FTP shareware utility. {Note: For 
details on how to use Fetch, see Use Fetch to upload your 
files to a provider’s server in the Client-Side Image Maps 
chapter.) 

Using a M AILTO command to route fonn data provides a 
simple solution for designers who do not want to get 
involved with CGI scripts. However, you’ll find that the data 
that is mailed to an email address will need to be cleaned up 
in a word processor (Figure 1 1 and following). 

l-Mary+Jo+Fahey&2-233+Lex1ngton+Avenue+%23603&3-New+York& 
4-NYi5-10021&6-USA&7-mjfahey 
@i nterport . net&Submi t-Subm1 t 
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2D graphics, 34-35, 37-39 

2D images, 349 

2D navigation, 39 

3D animation, 364 

3D browsers, 27, 35 

3D Chat, 396, 397, 400-401 

3D graphics, 30-32, 35, 40. See also VRML. 

3DMF, 30-31, 35, 393 

A 

Active link, changing color of, 1 32 
ActiveX, I 

Adobe Illustrator, creating type in, 181-182 
Adobe Systems, OpenType initiative, 95, 99, 106, 
107, 113, 125 

Afterburner (software), 381, 390 
AIFF flics, 307, 322,326 
Alawusa, Peju, 69, 72, 88 
all.coffec commercial service, 474-475 
all.coffee Web site, 54-68 
Amendola, Billy, 463, 464 
America Online, 195 
Anchors, 3 1 , 35, 40, 52, 60, 66, 283, 323 
Animation, 337-390 
flip-book animation, 349-354 
games, 34 1 

GIF animation, 337, 339-340, 349-363 
interactive, 341 , 364-380 
loops, 356, 377-378 
reducing file size, 340, 360-363 
Shockwave, 337, 341-348, 381 
Anliochia, Antonio, 303 
Apple Computer 
PC enabling hardware, 5 
VRML, 393 
Applets, 35 

Arizona Macintosh Users Group, 37 
The Arrival Web site, 342 
Arrows, 39 

Art. See Graphics, Images. 

As.sociative indexing, 34 
Audio. See Sound. 

Audio streaming, 322 

AU files, 299, 302, 307, 322, 326, 336 



AVI files, 294-298 

B 

Background, 133 

color, 63, 101, 109-110, 203,213,260 
fading an image into the browser background, 
202-203 

full-bleed images, 13,206 
HTML coding, 13,45-51, 136, 166,208-211, 
278-273,314,317 
Internet Explorer style sheet, 101 
in Netscape, 45, 133-135,202-212 
samples, 133-135 
sound, 313-323 
tiled, 204-206,383-386,471 
BackWeb (software), 9 
Banding, GIF images, 158-159 
Banner graphics, 178-187 
BBS Color Editor. See Online Color Editor. 
Beach, David, 305 
Ben 8l Jerry’s Hair Game, 343, 344 
Berners-Lee, Tim, 33 
Best Business Solutions (BBS), 127, 129 
Biggar, Jamie, 341 
BIN files, 145 
Bin-Hex format, 19 

Bit depth, 151, 155, 157, 182, 185-186,217-218 
BlackSun Iniernational 
CyberHub, 30, 396 
virtual .scavenger hunt, 63 
Blender {(Wgxzmo), 347 
Bookmarks, 307 
Borders, 39 

Borenzweig, Claude, 347 
Browsers 
3D, 27, 35, 243 
cascading style sheets, 95 
client-side image maps, 253 
color palette, 157, 179 
Fetch, 36, 94, 243, 262-264, 484 
image quality on, 153-154 
Internet Explorer, 95 

NetObjects Fusion Web page preview, 75, 90-92 
offline browsers, 1,9 
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style sheets, 98 
for VRML files, 452-453 
Build Your Own Bug (game), 344 
Bush, Vannevar, 34 
Buttons 
animated, 342 
borders, 39 

cropping graphics, 42-44 
HTML table to hold, 42-53 
interactive movies, 344 
Lingo buttons, 374-377 
outline turned off, 14 
Reset button, 482-483 
Submit button, 481-482 

C 

Cameron, Ewan, 99 
Capuozzo, Chris, 347 
Cascading style sheets (CSS 1 ), 95, 98 
Castle Red Dog Web site, 3 1 3-3 1 6 
CD-ROMs, 7-8 
CGI script, 461, 473, 474 
Character entities, 1 63 
Chat, 8,31,396, 397,400-401 
Chen, Eric, 282 
Chowka, Peter B., 95, 97, 46 1 
Cicada Web Development, 397 
Cinepak (software), 277 
Cipolla, Tom, 299, 324, 325, 333 
ClarisWorks (software), 201 
Classes, in HTML tags, 103 
Clayton, Damien, 347 
Clemens, Michael, 303 
Client-side image maps, 239, 242 
components, 242-243 
creating, 241-257,466-473 
planning, 244-247 

Clip media, sound effects, 324-325, 327-329 

cinet, Sharevvare.com site, 144 

Color 

background, 63, 1 0 1 , 1 09- 1 1 0, 203, 213, 260 
dithering, 151-152 
offont, 101, 122-123 
grayscale, 152 

images, 150, 151, 157, 179-181 
Internet Explorer style sheet, 101 



movies, 284-292, 381-382 
Super Palette, 236-238, 284-292 
text, 63 
text links, 39 
Color codes 
adding, 129-136 
hex code for, 127, 129-131 
Pantone color, 1 29, 1 30 
RGB color, 123, 129-136 
Color duotone, 152,232-234 
Comment tags, to embed style sheet, 99, 1 05- 1 08 
Compression. See File compression. 

CompuServe, GIF file formal patent, 161 

Coney Island Project Web site, 406-4 1 7 

Conferencing software, 309 

CoolTitlk (Apple), 308, 309 

Cosmo browser, 452 

CSS file, 100 

Cunniff,Tom, 303 

CU-SeeMe (software), 309 

CyberCash CyberCoin Wallet (software), 397-398 

CyberHub (BlackSun Interactive), 30 

D 

Data, forms and, 461, 465, 473-475 
Data fork, 293 

Data transfer, video, 274-275 
DeBabelizer (Equilibrium Technologies), 284 
bit depth, 150 
number of colors, 156 
pixel depth, 186 

Super Palette, 147, 157,236-238,284-282 
text offset, 170, 192, 193 
transparent GIF, 197,207,219 
DeBabelizer Lite (Equilibrium Technologies), 

159 

Decompression, of shareware from the Web, 145 
DeCrescenzo, Frank, 53, 69, 46 1 , 476 
Dellario, Frank, 402 
Dessimoz, Gail, 346 
DigiPhone (Electric Magic), 308 
Digital media, 347 
Digital versatile disc (DVD), 347 
Director (Macromedia), 337, 38 1 
Director Internet Player (Macromedia), 32, 35, 
381-390 
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Director Player (Macromedia), 364-380 

Disguise-O-Rama game, 343-344 

Dithering, 151-152 

Domain names, 36-37 

Domain Name Service (DNS), 36 

Dominianni, Matt, 402 

Download speed, 153, 157-158 

Drop shadow, 147, 2 1 3-220 

Duhan, Matt, 402 

Duotones, 152,232-235 

DVD, 347 

DWeb site, 346 

E 

Eberharcit, Curtis, 338, 339-341, 346, 364-366 
Elbert. Mark, 147, 175, 178, 188,202 
Email addresses 
Alawusa, Peju, 69 

Apple Developer’s Association, 345 
Chowka, Peter B., 95 
Cipolla, Tom, 249, 299 
DeCrescenzo, Frank, 46 1 
Dominianni, Matt, 402 
Eberhardt, Curtis, 337, 346 
Elbert, Mark, 142 
Esparza, Mary, 27, 29 
Greenbaum, Jane, 147 
Haviland, Beth, 475 
Hess, Greg, 299 
Hughes, Kevin, 241 
Kingsley, Chris, 344 
Marino, Paul, 402 
McGrew, Steven, 265 
Neuwirth, Pauline, 343-344 
Reinfurt, David, 1 
Santos, Kleber, 239 
Scott, John L., 27,475 
Shamson, Alex, 39 1 , 393 
Tekserve, 6 

Thomer, Marc, 265, 406 
Embedded fonts, 95, 125 
Embedded style sheet, 99, 102 
Empyrean (game), 30, 41 
The Engine.RDA, 346-347 
Environmental designers, 1 1 
EPS file, 181 

Esparza, Guillermo, 29, 3 1 



Esparza, Merry, 27, 29, 3 1 , 32, 39, 4 1 
Event handlers (script), 377 
Express VR browser, 452 
External images, 158 
External links, NetObjects Fusion, 87 

F 

Fetch (software), 36, 94, 243, 262-264, 484 
File compression 
audio, 295-296 
formats, 145 
GIF files, 157-160 
GIF patent, 161 
JPEG files, 157-160, 161 
movies, 381, 390 
video, 267, 276-277, 295-296 
File compression algorithms, JPEG, 159 
File compression formats, 145 
File conversion, sound files, 326, 336 
FileMaker (Claris), 473 
Filo, David, 127, 137 
FLAT files, 293 
FlattenMooV (software), 293 
Flowcharting, 41 
Fonts. See also Typography, 
boldface, 163 

changing in a headline, 116-117 
color, 101, 122-123 
embedded fonts, 95, 125 
family, 100, 122-123 
HTML, 63,67 

Internet Explorer style sheet, 100 
italic, 163 

OpenType initiative, 95, 97, 99, 106, 107, 113, 
125 

style sheets, 99 

TrueType fonts, 102, 105, 108-1 12, 124-125 
underline, 163 
Fonns, 46 1 

client-side image map, 466-472 
data and, 461, 465, 473-475 
designing, 467-484 

MAILTO URL, 461, 473-474, 483-484 
Reset button, 482-483 
Submit button, 48 1 -482 
Frame layout, 54-68 
Freeloader (software), 9 
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Frequency, 296 
Fruchter, Jason, 348 
Fry, David, 303 
FTP, 36 

Full bleed images, 13, 206 

G 

Games, 30, 34 1 , 343-344, 348 
General Motor’s Product Line Web page, 345 
Ghosting image, 204 
GIF animation, 337, 339-340, 349-363 
GlFBuilder (software), 339, 340, 349, 355-357 
GIFConverter (software), 1 86 
GIFnies,31, 157-161, 198 
download speed, 157-158 
interlaced GIF, 158-161, 186, 218 
reducing size, 360 
transparent GIF, 158-161,258-261 
GIF images, 158-159,247 
animation, 337, 339-340, 349-363 
banding, 158-159 
directory for, 1 90, 359 
linking to, 188-191,278 
NetObjects Fusion softwtu'e, 80 
posterization, 160 
transparent GIF, 207 
GIF Wizard (software), 340, 360-363 
Giles, Aaron, 192 
Gontier, Frederic, 396 
Gottlieb, Sam, 377 

Graphics, 147-238. See also Buttons, Images, 
animation, 337-390 
arrows, 39 

banner graphics, 178-187 
color duotone, 232-235 
drop shadow, 147, 2 1 3-23 1 
fading an image into the browser background, 
202 

linking thumbnail GIF to external JPEG, 
188-191 

silhouettes, 207-2 1 2 

tiled background, 204-206, 383-386, 471 
uploading file to server, 263 
VRML, 391-460 

wrapping text around a photo, 1 92- 1 97 
Grayscale, 152 
Green, Andrew, 308 



Greenbaum, Jane, 147, 221 
Grouped formatting, text, 102-103 

H 

Hale, Tom, 8 
Hapke, Matt, 402 
Haviland, Beth, 475 
Hennessey, Patrick, 293 
Hess, Greg, 299, 3 13 

Hexadecimal codes, for color, 39, 123, 127, 129- 
131 

Hill, John, 347 
Histograms, Photoshop, 1 50 
Home page, 33, 35 
HoUava, 35 

Hotspots, 3 1,35, 239, 241 
.HTM extension, 190 
HTML. See also HTML attributes, HTML 
documents, HTML tags, 
acronym, 162 

creating 2D navigation controls with, 39 
locating images on Web page, 1 65- 1 77 
NetObjects Fusion and, 69, 88 
Netscape Navigator reference material, 140-141 
typographic controls, 47 
updates posted to Netscape, 153 
World Wide Web Consortium, 95 
HTML attributes 

align=, 14,64, 169, 173-175, 177, 192, 195, 197 

alink=,61, 132, 133, 136,314,317 

alt=, 60,61,62 

area=, 250-254 

auloplay=, 271,272 

autostart=, 313, 317 

background=, 13,45-51, 136, 166, 208-21 1, 
278-283,314,317 
base=, 60 

base target=, 64, 66, 67 
bgcolor=, 60-64, 67, 120, 123, 129, 131, 
133-136, 248-254, 255, 272, 3 1 4, 3 1 7, 460 
bordei^, 49-51,60, 62, 249 
color=, 122-123 
cols=,56, 58, 68, 120, 257 
controller=, 270, 272 
coords=, 250-254, 257 
face=, 122-123 
height=, 32 1 



hidden, 313, 317 

href=, 39, 47-5 1 , 60, 6 1 , 64, 67, 1 23, 1 90, 191, 
250-254, 281,318, 321-323 
hspace=, 165, 170-171, 177, 198-199 
link=, 132, 133, 136,314,317 
loop=, 270, 272,314,317 
marginheight=, 57, 58 
marginwidth=, 57, 58, 67 
melhod=, 473 

name=, 57, 58, 250-254, 256-257 
noresize=, 57, 58 
rows=, 56 
,scroll=, 57, 58 
shape=, 250-254, 257 
size=, 163, 173, 196,200 
src=, 46-5 1 , 57, 60, 62, 64, 68, 1 1 3, 1 67, 1 77, 
187, 191, 199-200,208-212,249-254, 256, 
313,317, 320,460 
style=, 101-104, 114 
target=, 57, 60, 6 1 
texl=, 131, 136,314,317 
type=, 102-104,474 
usemap=, 249 

vlink=,60,61, 132,133, 136,314,317 
volume=, 313-314,317 
vspace=, 171, 175, 198-199 
widlh=, 48-51,321 
HTML documents 
borders, 39 
buttons, 14, 39, 42-44 
client-side image map, 242-257 
column format, 119-121 
comment lines, 1 96 
completing, 59 

creating, 45, 59-60, 105, 166, 187, 189, 194, 198 
ending link tag, 39, 164 
fading an image into browser background, 
202-203 

GIF animation testing, 360-36 1 

linking thumbnail GIF to exernal JPEG, 188-191 

link text, 38-39 

margins, 97, 100 

paragraph, 168 

style block, 105-107, 108-109 

style sheets, 98-102 

styling, 98-118 

subheads, 68, 102, 104 

table for buttons and text links, 42-53 



text wrap, 1 98-200 
type size, 195-196 
typography, 98- 103, 162 
VRML window, 458-460 
wrapping text around a photo, 192-197 
HTML files, 19, 187, 190 
cross-platform, 8 

save as SimpleText, 45, 55, 62, 63, 66, 105, 1 14 
testing an image, 1 87 
uploading to server, 262-264 
viewed online or offline, 7 
HTML tags, 34, 162, 163 
<A>, 39-40. 52. 60-61, 67, 123, 189,282,318, 
322, 323 

<ADDRESS>, 52, 254 

<AMG>, 195, 197 

<AREA>, 250-254 

<B>, 163, 176, 255, 272, 282, 283 

<BASE>, 57 

<BLOCKQUOTE>, 97, 100, 171-172, 176 
<BODY>, 13. 39, 45-5 1 , 52, 61-64, 66, 67, 
103-104, 120, 123, 129, 131, 133-136, 163, 
166, 176, 187, 189, 198-201,208-212, 
248-256, 272, 278-283, 314,315,317, 
458-460 

<BR>,50-52,61,62,67, 104, 113, 123, 163, 
172, 175, 176, 255, 280-283 
<CENTER>, 60. 6 1 , 1 63, 1 72, 248-254. 256, 
270, 272,317,459,460 
<DL>,97, 169-170, 171, 176,209,278-283, 
319-321,323 

<EMBED>, 268-272, 3 1 3-3 14. 3 1 7, 458-46 1 
<FONT>, 63, 67, 95, 122-123, 163, 173, 176, 
196, 198-200,200 
<FONTFACE>, 99 
<FORM>, 473-474 
<FRAME>, 55. 57, 67 
<FRAMESET>, 55-56, 58, 68 
<H1>, 1 13, 120, 123, 195 
<H2>,68, 102, 104, 1 13. 120, 195, 196, 
198-200, 209-211 
<H3>,68, 102, 104, 198-200,211 
<H6>, 195 

<HEAD>, 45-5 1 , 52. 56. 58, 60-64, 68, 

105-106, 120, 123, 133-136, 176, 187, 189, 

1 98-200, 208-2 1 1 . 248-254, 256, 272, 
278-283, 317,31 9-32 1 , 323, 458-460 
<HR>,51,52 
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<HTML>, 45-5 1, 52, 56. 58-63, 68. 105-106, 
120, 123, 133-136, 176, 187, 189, 198-200, 
208-2 1 1 , 248-254, 256, 272, 278-283, 3 1 7, 

319- 321,323,458-460 
<I>, 163,321,323 

<IMG>, 14,39,46-51,53.60.61.64, 113, 135, 
167, 169, 177, 187, 188, 195, 197, 198-201, 
208-2 1 1 , 249-254, 256, 278-283, 3 1 7, 3 1 8. 

320- 323, 358, 399 
<INPUT>,474 

<M AILTO>, 254, 256, 473-474 
<MAP>, 250-254, 256-257 
<MULTICOL>, 95, 119-121 
<NOBR>, 163 
<NOFRAMES>, 55, 58, 68 
<P>,68, 104, 163, 168, 175, 177, 198-199,201, 
281 

<PRE>, 154, 164 
<STYLE>, 102-104, 106-111 
<TABLE>, 46-5 1,53 
<TD>,47,53 
<TH>, 47-5 1,53 

<TITLE>, 45-5 1 , 53. 56. 58. 60, 6 1 . 63, 64, 68, 
10.5-106, 120, 123, 133-136, 177, 187, 189, 
20 1 , 208-2 1 0, 208-2 11,212, 248-254, 256, 
257, 272, 278-283, 3 1 7. 458-460 
<TR>, 46-51,. 53 
<U>, 163 
with classes, 103 
nesting, 164,319-320 
NetObjects Fusion and. 69. 88 
Quark XPress tags compared to, 162, 163 
special characters, 163, 196 
starting and ending tags, 164 
viewing on a Web site, 3 1 8 
HTTP. 36 

Hughes, Kevin, 241 
Hybrid CD-ROM. 8 
HyperCard, 34 
Hyperlinking, 27, 33, 40 
Hypermedia, 33-34 

I 

Image maps, 32, 239, 465. See also Client-side 
image maps. 

Images, 147 
animation, 337-390 

Index 



bit depth, 151, 155, 157, 182, 185-186 
color, 150, 157, 179-181 
color duotonc, 232-235 
dithering, 151-152 
download speed, 153 
drop shadow, 147,213-231 
duotones, 152, 232-235 
external images, 1 58 

fading an image into browser background, 
202-203 

filefomiat, 158-161, 186 
file naming, 152-153 
file size, 150, 156 
full bleed images, 13 
ghosting, 204 
GIF files, 157-161 
grayscale, 152 
inline images, 158 
JPEG files, 157-161 

linking thumbnail GIF to external JPEG, 
188-191 

locating on Web pages, 1 65- 1 77 
resizing, 41 1 
scaling, 478 
scanning, 150, 179 
silhouettes, 207-212 
size of, 149, 155-156, 178 
wrapping text around a photo, 1 92- 1 97 
Images GIF, 158-159 
Inflation distance, 420 
Inline graphics links, 27, 39 
Inline images, 158 
Inline style tags, 99, 101, 115 
Insignia Solutions, Win95 emulation program, 6 
Interactive movie, 364-380 
Interlaced GIF, 158-161, 186, 218 
Internet Assistant (Microsoft), 209 
Internet Channel, 475 
Internet Explorer (Microsoft), 95 
client-side image maps, 253 
HTML tags specific for, 158 
style sheets, 95, 97, 99- 1 0 1 
Internet Phone (Vocaltec), 3 1 
Internet Protocol (Microsoft), 35 
Internet service providers (ISPs), 474-475 
Internet telephone, 3 1 , 308 
InterNIC, 36-37 
Inverted perspective, 30 



lUMA site, 305-306 



J 

Joseph, Regina, 347 
JPEG, 31, 157-160, 161 
downloading, 342 
images, 159, 190, 247,342 
linking thumbnail GIF to JPEG file, 188-191 
saving, 159 

K 

Keenan, Rob, 347 

Keyboard Magazine Web site, 322 

KPT Bryce (software), 364 

L 

Lemer, David, 6 

Linear perspective, 30 

Linear slide shows, 37-38 

Line-height, Internet Explorer style sheet, 1 0 1 

Lingo (software), 365, 373-377 

Linked style sheet, 99 

Linking. See Hyperlinking. 

Links 

to movie, 278-282 
to sound files, 3 1 8-323 
Link text, 38-39 

Live3D (software), 402, 405, 456-467 
LiveAudio, Netscape, 299, 302, 3 1 0, 3 1 3 
Livescript (software), 342 
Long distance calling, 3 1 , 308 
Loops, animation, 356, 377-378 
Lord, Robert, 305 
LZW patent, 161 

IVI 

Mac, PC cards for, 5-6 
MacBinary file, 145,263 
MacLink/Plus (Dataviz), 208 
Macromedia, 30, 32 

Macromedia Director>' Lingo Workshop 
(Thompson and Gottlieb), 377 
MAILTO URL, 52, 64 
forms, 46 1 , 473-474, 483-484 



HTML tags, 254, 256 
Marelli, Charles, 301 
Margins, 97, 100, 101 
Marino, Paul, 402 
Markowitz, Gar>', 341 
Marr,Grcg, 151,284, 290 
Matthews, Jim, 36, 484 
McGrew, Charles, 307 
McGrew, Steven, 265, 276 
Memex system, 34 
MetaPlay Web site, 402 
Microsoft 

browser “war” with Netscape, 1 
OpenType initiative, 95, 99, 106, 107, 113, 125 
TrueType fonts, 102, 105, 108-112, 124-125 
MIDI files, 3 10, 322 
acronym, 310 
for downloading, 3 1 7 
Milktruck (Traveling Software), 9 
Mitchell, Kevin, 186 
Mobius Gallery site, 29-32, 42 
Molchon, Rob, 347 
Mom’s Truck Stop Web site, 402-405 
Moos, 402, 405 
Mortal Kombat (game), 346 
Mosaic (Spyglass), client-side image map, 253 
Motion Picture Experts Group. See MPEG. 
Movie Analysis Tool (Adobe Premiere), 265, 
273-275 
Movies 

animation, 345-348, 364-380 
characteristics, 274-275 
color, 284-292, 381-382 
create a movie projector, 379-381 
performance specs, 273-274 
photography, 267-298 
video compressor, 292 
MP2 files, 305, 322 
MPEG files, 269, 277, 305 
MUDs (multiuser domains), 402 
Multi-party conferencing, 309 
Music. See also Sound, 
clip music mixed with sound effects, 327 
downloading on Netscape, 311-312 
intere.sting links, 322-323 
MIDI files, 310 
royalty-free, 327 
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Navigation, 27-68 
2D, 27, 34-35, 37-39 
3D, 27,30-32, 35,40 
buttons, HTML table to hold, 42-53 
flowcharting, 41 
frame layout, 54-68 
hypermedia, 33-34 
image maps, 32 
interactive movies, 374 
story boarding, 41 

textlinks, HTML table to hold, 42-53 
URLs, 35-37 
VRML file, 453 
Nelson, Ted, 34 
Nesting tags, 1 64, 3 1 9-320 
Net Attache Light (Tympani Software), 9 
NetObjects Fusion (software), 69, 7 1 , 2 1 0, 466 
<MULTlCOL>tag, 95, 119-121 
creating client-side image map, 466-473 
creating Web pages with, 76-88 
design a form, 476-484 
hardware and software requirements, 7 1 
HTML and, 69, 88 
publishing the site, 92-94 
selecting browser for, 75 
staging the site, 88-90 
starting, 72-75 
testing the site, 90-91 
NetPhone, 308 
Netscape, 307 
background, 45, 202-2 1 2 
background samples, 1 33- 1 35 
bookmark, 307 

browser “war’* w'ith Microsoft, 1 
client-side image map, 253 
Director Internet Player and, 38 1 
HTML tags viewed, 3 1 8 
HTML updates posted, 153 
images, 149 

Live Audio, 299, 302, 3 1 0, 3 1 3 
music flics, 31 1-312 
text wrap, 198-200 
tips, 13, 14 
using, 305 
Netscape features 
active link, 39 
Body Background tag, 45 



inline images as links, 39 
link text, 38-39 
tables, 42 
visited link, 39 
Netscape Navigator, 140-141 
HTML tags specific for, 1 58 
style sheets, 95, 97, 99 
Netw'ork anchors. See Anchors. 

Neuwirth, Pauline, 343 

Node pointers, 40 

NODfile.s, 73 

Number entities, 163 

N YVRMLSIG, 6 1 , 395, 396, 406, 408 

O 

O’Donnell, Dan, 396-397 
O’Donnell, Matt, 396-397 
Offline brow.scrs, 1,9 

Online Color Editor (BBS), 122, 123, 129-136, 
458 

Online publications, 3 

OpenTVpe initiative, 95, 99, 106, 107, 1 13, 125 
Optical illusion art, 30 
Orange Micro, PC enabling hardw'are, 5-6 
Ostroy, Alex, 347 

P 

Page links, NetObjects Fusion software, 87 

Painter 4.0, drop shadow, 147, 221-23 1 

Pantone color, 39, 129, 130 

Paradigm, for Web site, 17 

Patterson, Jeff, 305 

Pauling, Linus, 95, 97-100 

PC cards, for Macs, 5-6 

Pesce, Mark, 391, 393,406 

Phone links, 31, 308 

PhotoGIF (BoxTop Software), 193, 258, 261 
Photographs. See Images. 

Photoshop (software), 364, 409 
animation, 337, 339 
banner graphics, 178-185 
blue duotonc with, 232-235 
color codes, 129-130 
cropping button graphics, 42-44 
drop shadow, 2 1 3-220, 225 
GIF animation, 349-354 
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gradient tool, 202 
histograms, 150 
image quality, 150 
Info palette, 244 
palettes, 151, 244 
PICT image, 178 
pixel depth, 217-218 
saving image, 188 
text offset, 170, 192-193 
text wrap, 192-197, 198 
tiled background, 47 1 
transparent GIF, 258 
wrapping text around photo, 1 92- 1 97 
Piguet, Yves, 339, 355 
Pixels, 149, 155 
Planning Web pages, 26 
concept development, 1 7 
development team, 16-17 
flowcharting, 4 1 
graphic design, 21 

Reuters Web site as model, 11-15, 23-25 
schematic development, 18-19 
schematic prototype, 20-2 1 
story boarding, 41 
wayfinding, 1 1, 22-25 
Plug-ins, 140, 265,269-271 
Posted zati on, 160 
Print publications, 3 
augmented by CD-ROMs, 7-8 
PC Novice, 3 
The Net, 3, 7-8 
Web Techniques, 3 
Webweek, 3 

Pueblo (Chaco), 402-404 

Q 

Quark XPress (software), 162-163, 165 
QuickTime (Apple), 277, 297 
files, 293, 294-296 
plug-ins, 265, 269-27 1 
QuickTime VR (Apple), 3 1 -32, 40, 282, 345 
QuickTime VR Player, 345 

R 

Racz, Michael, 346 
RA files, 322 



Ragu Web site, 303 

Rasterized type, 1 82 

Razorsnails (game), 348 

RealAudio (Progressive Technologies), 304, 322 

Realtime voice communication, 3 1 

Redlitz, Sean, 341 

Redundancy, in wayfinding, 25 

Reflector (software), 309 

Reinfurt, David, 1, 11-12 

Reply Corp., PC cards, 6 

Resampling, sound files, 333-335 

Resource fork, 293, 297 

Reuters 

Business Alert, 13 
Business Briefing, 13 

Business Information Products site, 13-15, 17, 
19, 23,25 

News Machine site, 12-13, 17-19, 23-25 
RGB color, 123, 129-136, 151 
Ricci, Alberto, 299, 328, 330 
Rosenthal, Larry, 6 1 , 62, 65, 348, 396, 397, 406, 
408 

Rubber bands, 40 

S 

Santos, Kleber,239, 241 
Scaling, images, 478 
Scanning, 150, 179 
Schematic prototype, 20-21 
SciFi Channel Web site, 341 
Scott, John L., 27, 54, 55, 474, 475 
Search engines, 127 

extending the search beyond Yahoo!, 139 
Yahoo!, 127, 137-139 
Selamohlu, Handan, 98-99 
Selck, Brandee Amber, 305 
Shaders, 364 
Shah, Vineel, 347 

Shamson, Alex, 64, 39 1 , 406, 4 1 8, 423, 438, 452, 
456, 457 

Shareware, 144-145 

Shockwave (software), 337, 341-348, 381 
Silhouettes, 207-220 

SimpleText,45,55,62,63,66, 105, 1 14, 166, 177, 
194, 208, 243 
Simprov, 402-405 
Site Mill (Adobe), 10 
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Slappers, 53 

Slappcrs Web site, 463-465 
Smart links, NetObjects Fusion, 87 
Smith, David, 391 
Smith, Derrick, 53 
Smith, Sharleen, 341 
SoftWindows (Insignia), 6 
Sound 

background sound, 3 1 3-323 
clip media, 324-326, 327-329 
data rate, 275 
file conversion, 326, 336 
file formats, 322 
file optimization, 333 
Internet telephone, 31, 308-309 
links to, 318-323 
MIDI files, 310 

recording and mixing, 330-332 
resampling and downsampling, 333-335 
sample Web sites, 30 1 -307 
streaming, 322 
video conferencing, 309 
SoundApp (software), 303, 326, 336 
SoundEdit (software), 303 
SoundEffects (software), 299, 324, 327-332 
Sound files, 322 
compression, 295-296 
optimization, 333 
resampling, 333-335 
SoundMachine (software), 325 
SoundMaker (software), 335 
Spatial problem solving, in wayfinding, 23 
Special characters, 163, 196 
Spike Lee’s Web site, 4 
Splash screen, 30, 178 
Starbase C3 Web site, 396-401 
Storyboarding, 41 
Strata Studio (software), 365 
Strata Studio Pro (software), 31, 367 
Streaming audio, 304, 322 
Streaming video, 265, 267-268 
Stufflt Expander (software), 145 
Style sheets 

adding style sheet properties to a tag, 101-102 

comment tag, 99, 1 05- 1 08 

defined, 98 

embedded, 99, 102 

FAQ, 98-100 



fonts, 99 

inline style tags, 99, 10 1 , 1 1 5 
Internet Explorer, 95, 97, 99-101 
linked, 99 

Netscape Navigator, 95, 97, 99 
properties, 100-101 
W3C proposal, 95, 98, 107 
Sumex-Aim mirror sites 
ftp://ftp.amug.org/pub/mirrors/info-mac, 37 
ftp://mirror.apple.com/mirrors/ 

Info-Mac. Archive/, 36 

gopher;//gopher.cnuce.cnr.it/l 1 /pub/info-mac, 
36 

http://mirror.apple.com, 36 
Surfbot 3.0 (Surflogic LLC), 9 

T 

Tables, formatting form as, 474 
Tango for FileMaker (Every ware Development), 
473 

Tekserve, 6 

Telephone links, 31, 308 
Text 

adding to Web page, 469, 479 
in client-side image maps, 253-254 
color, 63 

formatting in columns, 119-121 
grouped fomiatting, 102-103 
Internet Explorer style sheet properties, 100-101 
styling, 98-118 

wrapping text around a photo, 192-197 
Text links, 27, 38-39 
color, 39 

HTML table to hold, 42-53 
NetObjects Fusion software, 85-88 
Text offset, 170, 192-193 
Text processor, 243 
Text wrap, 198-200 
Theurer, David, 284 
Thompson, John (J.T.), 377 
Thomer, Marc, 265, 396, 406 
tHUNK,6l,348 
tHUNKWORLD VRML, 65 
Tiled background, 204-206, 383-386, 47 1 
Transparency (software), 192, 193,207,218 
Transparent GIF, 158-161, 197, 207, 258-261 
Traveling Software, Milktruck, 9 
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TrueType fonts, 102, 105, 108-1 12, 124-125 
TrueType Open Version 2, 106 
Two-dimensional HTML, 34-35 
Two Twelve Associates, 1 1 
Typography. See also Fonts, 
adding to Web pages, 103 
HTML font sizes, 195, 196 
rasterized, 182 
stylesheets, 98-102 

TrueType fonts, 102, 105, 108-112, 124-125 

U 

Uni.sys, 161 
URL, 133 
defined, 35 

directory and file name infonnation, 37 
domain name information, 36-37 
function, 35, 40 
protocol information, 35-36 
replacing file name in Netscape URL field, 134 
submitting to Yahoo!, 142-143 
URLs 

ftp://ftp.amug.org/pub/mirrors/info-mac, 37 
ftp://ftp.microsoft.com/dcvelopr/drg/truetype, 
112 

http://cu-secme.edu/#GET, 309 
http://drcamcatchersweb.com/scripts, 473 
http://goliath.wpine.com/cu-seeme.html, 309 
http://homc.netscape.com/assistynet_sites/ 
bg/backgrounds.html, 133, 135 
http://home.netscapc.com/comprod/ 
mirror/index. html, 302 
http://home.netscape.com/comprod/ 

products/navigator/vcrsion_2.0/plugins/ 
audio-video.html, 304 
http://home.netscape.com/comprod/ 
products/navigator/version_3.0/ 
communication/cooltalk/index.html, 309 
http://info.fuw.edu.pl/multimedia/ 
sounds/animals, 324 
http.V/mansion. thepalacc.com/cgi-bin/ 
directory.pl, 313 

http://members.aol.com/alawusa/intro.html, 69, 
88 
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